Angular 2 FormGroup Add Validators dynamic

Ответ 1

Попробуйте, это должно работать

this.formGroup.controls["firstName"].setValidators(Validators.required);

Для нескольких валидаторов

this.formGroup.controls["firstName"].setValidators([Validators.required, Validators.minLength(2)]);

Но при этом будут отменены все валидаторы, предоставленные во время инициализации

РЕДАКТИРОВАТЬ:

Чтобы немедленно отразить элементы управления формы с недавно добавленным Validators, мы должны вызвать this.formGroup.controls["firstName"].updateValueAndValidity(); после динамической установки валидаторов.

this.formGroup.controls["firstName"].setValidators(Validators.required);
this.formGroup.controls["firstName"].updateValueAndValidity();

ДЕМО для того же самого

* ПРИМЕЧАНИЕ *

updateValueAndValidity() вызовет событие valueChanges, даже если значение действительно не изменилось (что может привести к бесконечному циклу, если вы вызываете его из подписки valueChanges). Вы можете предотвратить это с помощью необязательного параметра object: {onlySelf: true, emitEvent: false}

Ответ 2

Хотя ответ амит Чигадани правильный, имейте в виду следующее.

Хотя это решение работает для обновления валидаторов, новые валидаторы сами по себе не будут запускаться, пока вы не измените значение полей формы. поэтому рекомендуется запускать следующую функцию сразу после обновления ваших валидаторов;)

В терминах непрофессионалов: добавьте строку, если вы хотите, чтобы ваши классы ng-valid и ng-invalid обновлялись сами.

this.formGroup.controls["firstName"].setValidators([Validators.required, Validators.minLength(2)]);
this.formGroup.controls["firstName"].updateValueAndValidity();

Если вы хотите обновить только значение и срок действия этого единственного элемента управления, добавьте этот параметр

this.formGroup.controls["firstName"].setValidators([Validators.required, Validators.minLength(2)]);
this.formGroup.controls["firstName"].updateValueAndValidity({onlySelf: true});

Еще один знак. В Angular2 не следует использовать синтаксис массива для получения элементов управления группы форм, но это

this.formGroup.get("firstName");

Который также принимает точечную запись

this.formGroup.get("userSectionFormGroup.firstName");

Ответ 3

есть решение, которое мы можем сделать с помощью приведенного ниже кода.

const validators = new Array<Validators>();
          validations.forEach(validation => {
            switch (validation.Type) {
              case 'required':
                validators.push(Validators.required);
                break;
              case 'minLength':
                validators.push(Validators.minLength(parseInt(validation.Expression, 10)));
                break;
              case 'maxLength':
                validators.push(Validators.maxLength(parseInt(validation.Expression, 10)));
                break;
              case 'pattern':
                validators.push(Validators.pattern(validation.Expression));
                break;
            }
          });
          this.form.controls[i].setValidators(validators);
 }
      }
    });

Ответ 4

Я использовал:

export function getValidatorFnArray(obj): ValidatorFn[] {

  const validators = [];

  if (obj.required || obj.required === '' ) {
    validators.push(Validators.required);
  }
  if (obj.minLength) {
    validators.push(Validators.minLength(parseInt(obj.minLength, 10)));
  }
  if (obj.maxLength) {
    validators.push(Validators.maxLength(parseInt(obj.maxLength, 10)));
  }
  if (obj.pattern) {
    validators.push(Validators.pattern(obj.pattern));
  }
  if (obj.email || obj.email === '') {
    validators.push(Validators.email);
  }

  return validators
}

где obj может быть что-то вроде:

validation: { 
  required: '',
  pattern: '\d+',
}