W Angular, jak dodać walidator do FormControl po utworzeniu kontrolki?

Mamy komponent, który ma dynamicznie zbudowaną formę. Kod dodawania kontrolki 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 tego dokonać? Nie możemy znaleźć żadnej dokumentacji na ten temat w Internecie. Znalazłem chociaż w form controls jest setValidators 

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

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

Author: halfer, 2016-08-05
Source

5 answers

Po prostu przekazujesz FormControl tablicę walidatorów.

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

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

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

 121
Author: Andy-Delosdos,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-08-05 21:00:40

Aby dodać to, co napisał @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()

Jest to niesamowity sposób, aby programowo ustawić walidację formularza.

 94
Author: shammelburg,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-12-11 11:21:26

Jeśli używasz reactiveFormModule i masz formGroup zdefiniowany TAK: 

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

Następnie możesz dodać nowy walidator ( i zachować stare), aby FormControl za pomocą tego podejścia: 

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

 83
Author: Eduard Void,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-11-13 08:32:47

Myślę, że wybrana odpowiedź nie jest poprawna, ponieważ pierwotne pytanie brzmi "jak dodać nowy walidator po utworzeniu formControl".

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

Ale brakuje nam funkcji addValidator (), która nie nadpisuje walidatorów już dodanych do formControl. Jeśli ktoś ma odpowiedź na ten wymóg, byłoby miło umieścić tutaj.

 3
Author: user2992476,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-08-11 00:23:26

Oprócz odpowiedzi Void tutaj jest Metoda addValidators: 

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żna dynamicznie ustawiać walidatory: 

some_form_control.addValidators([ first_validator, second_validator ]);
some_form_control.addValidators([ third_validator ]);
 3
Author: lucifer63,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-12-19 16:50:21