У Angular, як додати Validator до FormControl після створення елемента керування?

У нас є компонент, який має динамічно побудовану форму. Код для додавання елемента керування за допомогою валідаторів може виглядати так:

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

Але скажімо, що я хочу додати 2-й Валідатор пізніше . Як ми можемо досягти цього? Ми не можемо знайти жодної документації щодо цього в Інтернеті. Я знайшов, хоча в елементах керування формою є setValidators

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

але незрозуміло, як додати новий або спеціальний валідатор.

Ви просто передаєте FormControl масив валідаторів.

Ось приклад, що показує, як можна додати валідатори до існуючого FormControl:

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

Зверніть увагу, що це призведе до скидання всіх існуючих валідаторів, які ви додали під час створення FormControl.

Щоб додати до того, що опублікував @Delosdos.

Встановіть валідатор для елемента керування в FormGroup: this.myForm.controls['controlName'].setValidators([Validators.required])

Видаліть валідатор із елемента керування у групі форм: this.myForm.controls['controlName'].clearValidators()

Оновіть FormGroup після запуску будь-якого з наведених рядків. this.myForm.controls['controlName'].updateValueAndValidity()

Це дивовижний спосіб програмно встановити перевірку вашої форми.

Якщо ви використовуєте reactiveFormModule і форму formGroup визначаєте так:

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

ніж ви можете додати новий валідатор ( і зберегти старий ) до FormControl за допомогою цього підходу:

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 повертає валідатор складання, що містить усі визначені раніше валідатори.

Я вважаю, що обрана відповідь невірна, оскільки вихідне запитання - "як додати новий валідатор після створення формиControl".

Наскільки я знаю, це неможливо. Єдине, що ви можете зробити, це створити масив валідаторів динамічно.

Але те, чого нам не вистачає, - це мати функцію addValidator (), яка не замінює валідатори, вже додані до formControl. Якщо хтось має відповідь на цю вимогу, було б непогано розмістити тут.

Окрім відповіді Едуарда Войда, ось 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 );
};

З його допомогою ви можете динамічно встановлювати валідатори:

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