Wie füge ich in Angular Validator zu FormControl hinzu, nachdem das Steuerelement erstellt wurde?

Wir haben eine Komponente, die eine dynamisch aufgebaute Form hat. Der Code zum Hinzufügen eines Steuerelements mit Validatoren könnte folgendermaßen aussehen:

var c = new FormControl('', Validators.required);

Angenommen, ich möchte später den 2. Validator hinzufügen . Wie können wir das erreichen? Wir können online keine Dokumentation dazu finden. Ich habe jedoch festgestellt, dass es in den Formularsteuerelementen setValidators gibt

this.form.controls["firstName"].setValidators 

Es ist jedoch nicht klar, wie ein neuer oder benutzerdefinierter Validator hinzugefügt werden soll.

Sie übergeben dem FormControl einfach ein Array von Validatoren.

Hier ist ein Beispiel, das zeigt, wie Sie einem vorhandenen FormControl Validatoren hinzufügen können:

this.form.controls["firstName"].setValidators([Validators.minLength(1), Validators.maxLength(30)]);

Beachten Sie, dass dadurch alle vorhandenen Validatoren zurückgesetzt werden, die Sie beim Erstellen des FormControl hinzugefügt haben.

Hinzufügen zu dem, was @Delosdos gepostet hat.

Legen Sie einen Validator für ein Steuerelement fest in FormGroup: this.myForm.controls['controlName'].setValidators([Validators.required])

Entfernen Sie den Validator aus dem Steuerelement in der FormGroup: this.myForm.controls['controlName'].clearValidators()

Aktualisieren Sie die FormGroup, sobald Sie eine der oben genannten Zeilen ausgeführt haben. this.myForm.controls['controlName'].updateValueAndValidity()

Dies ist eine erstaunliche Möglichkeit, Ihre Formularvalidierung programmgesteuert festzulegen.

Wenn Sie reactiveFormModule verwenden und formGroup wie folgt definiert haben:

public exampleForm = new FormGroup({
        name: new FormControl('Test name', [Validators.required, Validators.minLength(3)]),
        email: new FormControl('[email protected]', [Validators.required, Validators.maxLength(50)]),
        age: new FormControl(45, [Validators.min(18), Validators.max(65)])
});

Dann können Sie FormControl mit diesem Ansatz einen neuen Validator hinzufügen ( und alte behalten ):

this.exampleForm.get('age').setValidators([
        Validators.pattern('^[0-9]*$'),
        this.exampleForm.get('age').validator
]);
this.exampleForm.get('email').setValidators([
        Validators.email,
        this.exampleForm.get('email').validator
]);

FormControl.validator gibt einen Compose-Validator zurück, der alle zuvor definierten Validatoren enthält.

Ich denke, die ausgewählte Antwort ist nicht korrekt, da die ursprüngliche Frage lautet "Hinzufügen eines neuen Validators nach dem Erstellen des formControl".

Soweit ich weiß, ist das nicht möglich. Das einzige, was Sie tun können, ist, das Array der Validatoren dynamisch zu erstellen.

Was wir jedoch vermissen, ist eine Funktion addValidator (), um die bereits zum formControl hinzugefügten Validatoren nicht zu überschreiben. Wenn jemand eine Antwort auf diese Anforderung hat, wäre es schön, hier gepostet zu werden.

Zusätzlich zur Antwort von Eduard Void gibt es hier die addValidatorsMethode:

declare module '@angular/forms' {
  interface FormControl {
    addValidators(validators: ValidatorFn[]): void;
  }
}

FormControl.prototype.addValidators = function(this: FormControl, validators: ValidatorFn[]) {
  if (!validators || !validators.length) {
    return;
  }

  this.clearValidators();
  this.setValidators( this.validator ? [ this.validator, ...validators ] : validators );
};

Mit ihm können Sie Validatoren dynamisch einstellen:

some_form_control.addValidators([ first_validator, second_validator ]);
some_form_control.addValidators([ third_validator ]);