TL; DR
Wir bauen die Dokumentation @myndpm/dyn-formsbei mynd.dev und wir haben für eine Vielzahl von benutzerdefinierten fuctions - Unterstützung hinzugefügt wie Validatoren, AsyncValidators, Matchers Bedingungen und vieles mehr.

Nach der Darstellung und Dokumentation von @myndpm/dyn-formswar das erste Merkmal, das in der Roadmap für ein einfaches und serialisierbares Konfigurationsobjekt implementiert wurde, die Definition und Bereitstellung von Validatorsund AsyncValidators.

Wir haben uns etwas Zeit genommen, um einen guten Weg zu finden, um sie umzusetzen, und wir haben den aussagekräftigsten ausgewählt:

createMatConfig('INPUT', {
  name: 'quantity',
  options: {
    validators: ['required', ['min', 1] ],
    asyncValidators: ['myAsyncValidator']
  },

Angular bietet Standard- Validatoren , die wir programmgesteuert in unseren reaktiven Formularen verwenden. Einige davon sind Validator-Funktionen ( ValidatorFn) Validators.requiredund andere sind Validator-Fabriken ( (args) => ValidatorFn), die einen Validator basierend auf einem erforderlichen Parameter wie erstellen Validators.minLength(4).

Validator-Fabriken sind eine sehr gute Möglichkeit, unsere Funktionen im Allgemeinen zu parametrisieren. Daher haben wir ihre Bereitstellung mit einer idund einer Fabrik definiert fn:

export interface DynControlValidator {
  id: string;
  fn: (...args: any[]) => ValidatorFn;
}

Die Notation, um sie im Konfigurationsobjekt zu verwenden, lautet wie folgt:

// without parameters
options: { validators: ['required'] },
// with parameters as array
options: { validators: ['required', ['min', 1] ] },
// with parameters as object
options: { validators: { required: null, minLength: 4 } },

Benutzerdefinierte Validatoren

Wie bereits erwähnt, müssen wir unsere ValidatorFnFabrik nur mit einem idund einem versehen fn. So können wir sie in unserem Modul einfach mit einem Code wie dem folgenden versehen:

import { AbstractControl, ValidatorFn } from '@angular/forms';
import { DynFormsModule } from '@myndpm/dyn-forms';
import { DynControlValidator } from '@myndpm/dyn-forms/core';
const validators: DynControlValidator[] = [
  {
    id: 'email',
    fn: (): ValidatorFn => {
      return (control: AbstractControl) => {
        // implement my validator
        // to return { email: true } | null;
      }
    }
  }
];
@NgModule({
  imports: [
    DynFormsModule.forFeature({ validators, priority: 100 });

AsyncValidators

Das Bereitstellen von asynchronen Validatoren funktioniert auf die gleiche Weise. Sie geben Ihre fnein idund verwenden sie im Konfigurationsobjekt:

createMatConfig('INPUT', {
  name: 'quantity',
  options: {
    validators: ['required'],
    asyncValidators: ['myAsyncValidatorId'],
  },

// single argument which can be an object
asyncValidators: [['myAsyncValidatorId', args]],
// your factory will receive fn(args)
// multiple arguments in array to be destructured
asyncValidators: [['myAsyncValidatorId', [arg1, arg2]]],
// your factory will receive fn(arg1, arg2)

Mit dieser Notation haben wir Unterstützung für mehrere Arten von Funktionen hinzugefügt, die wir in den dynamischen Formularen benötigen: Validatorsund AsyncValidatorswie wir gerade gesehen haben, Matchersund Conditionsum die Steuerelemente unter bestimmten Anforderungen zu manipulieren und um auch ParamFnsden Parametern der DynControls Funktionen hinzuzufügen.

Wir werden uns im nächsten Kapitel mit den bedingten Ausführungen befassen. Was halten Sie
in der Zwischenzeit von dieser Notation?

Zuvor in dieser Reihe: Ein neuer Ansatz für dynamische Formen in Angular

// PS. We are hiring!