W Angular, jak dodać Validator do FormControl po utworzeniu kontroli?

Mamy komponent, który ma dynamicznie budowaną formę. Kod dodający kontrolkę z walidatorami może wyglądać następująco:

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

Ale powiedzmy, że chcę dodać drugi walidator później . Jak możemy to osiągnąć? Nie możemy znaleźć żadnej dokumentacji na ten temat w Internecie. Znalazłem chociaż w kontrolkach formularza jest setValidators

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

ale nie jest jasne, jak dodać nowy lub niestandardowy walidator.

Po prostu przekazujesz FormControl tablicę walidatorów.

Oto przykład pokazujący, jak można dodać walidatory do istniejącego FormControl:

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

Uwaga: spowoduje to zresetowanie wszystkich istniejących walidatorów dodanych podczas tworzenia FormControl.

Aby dodać do tego, co opublikował @Delosdos.

Ustaw walidator dla kontrolki w FormGroup: this.myForm.controls['controlName'].setValidators([Validators.required])

Usuń walidator z kontrolki w FormGroup: this.myForm.controls['controlName'].clearValidators()

Zaktualizuj FormGroup po uruchomieniu jednej z powyższych linii. this.myForm.controls['controlName'].updateValueAndValidity()

To niesamowity sposób na programowe ustawianie walidacji formularza.

Jeśli używasz reactiveFormModule i masz formGroup zdefiniowaną w ten sposób:

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)])
});

niż jesteś w stanie dodać nowy walidator ( i zachować stare ) do FormControl w ten sposób:

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 zwraca walidator kompozycji zawierający wszystkie wcześniej zdefiniowane walidatory.

Myślę, że wybrana odpowiedź jest nieprawidłowa, ponieważ pierwotne pytanie brzmi: „jak dodać nowy walidator po utworzeniu formControl”.

O ile wiem, to niemożliwe. Jedyne, co możesz zrobić, to dynamicznie utworzyć tablicę walidatorów.

Jednak brakuje nam funkcji addValidator (), która nie przesłania walidatorów już dodanych do formControl. Jeśli ktoś ma odpowiedź na to wymaganie, byłoby miło zostać opublikowanym tutaj.

Oprócz odpowiedzi Eduarda Voida, oto addValidatorsmetoda:

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 );
};

Za jego pomocą możesz dynamicznie ustawiać walidatory:

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