Angular 2
Angular2 Benutzerdefinierte Validierungen

Parameter

Beispiele für benutzerdefinierte Validatoren:

In Angular 2 gibt es zwei Arten von benutzerdefinierten Validatoren. Synchrone Validatoren wie im ersten Beispiel, die direkt auf dem Client ausgeführt werden, und asynchrone Validatoren (zweites Beispiel), mit denen Sie einen Remote-Service aufrufen können, um die Validierung für Sie durchzuführen. In diesem Beispiel sollte der Prüfer den Server anrufen, um festzustellen, ob ein Wert eindeutig ist.

export class CustomValidators {

static cannotContainSpace(control: Control) {
    if (control.value.indexOf(' ') >= 0)
        return { cannotContainSpace: true };

    return null;
}

static shouldBeUnique(control: Control) {
    return new Promise((resolve, reject) => {
        // Fake a remote validator.
        setTimeout(function () {
            if (control.value == "exisitingUser")
                resolve({ shouldBeUnique: true });
            else
                resolve(null);
        }, 1000);
    });
}}

Wenn Ihr Steuerwert gültig ist, geben Sie einfach null an den Aufrufer zurück. Andernfalls können Sie ein Objekt zurückgeben, das den Fehler beschreibt.

Validatoren im Formbuilder verwenden

   constructor(fb: FormBuilder) {
    this.form = fb.group({
        firstInput: ['', Validators.compose([Validators.required, CustomValidators.cannotContainSpace]), CustomValidators.shouldBeUnique],
        secondInput: ['', Validators.required]
    });
}

Hier verwenden wir den FormBuilder, um ein sehr einfaches Formular mit zwei Eingabefeldern zu erstellen. Der FromBuilder nimmt für jedes Eingabesteuerelement ein Array mit drei Argumenten an.

1. Der Standardwert des Steuerelements.
2. Die Validatoren, die auf dem Client ausgeführt werden. Sie können Validators.compose ([arrayOfValidators]) verwenden, um mehrere Validatoren auf Ihr Steuerelement anzuwenden.
3. Ein oder mehrere asynchrone Validatoren auf ähnliche Weise wie das zweite Argument.

get / set formBuilder steuert die Parameter

Es gibt zwei Möglichkeiten, formBuilder-Steuerparameter einzustellen.

1. Beim initialisieren:

exampleForm : FormGroup;
constructor(fb: FormBuilder){
  this.exampleForm = fb.group({
      name : new FormControl({value: 'default name'}, Validators.compose([Validators.required, Validators.maxLength(15)]))
   });
}

2. Nach dem Initialisieren:

this.exampleForm.controls['name'].setValue('default name');

Rufen Sie den Wert des Steuerelements formBuilder ab:

let name = this.exampleForm.controls['name'].value();