Angular 2 FormGroup Add Validators dynamic

Question

I am trying to add a validator to the dynamics of a FormContol (not during initialization) and it does not work.

the code:

this.formGroup.controls["firstName"].validator = Validators.Required;

Run codeHide result

Has anyone done this?

Answer 1

Try it, it should work

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

For multiple validators

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

But at the same time, all validators provided during initialization will be canceled

EDIT :

To immediately reflect form controls with a newly added form Validators, we must invoke this.formGroup.controls["firstName"].updateValueAndValidity();validators after the dynamic installation.

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

DEMO for the same

* NOTE *

updateValueAndValidity() valueChanges, ( , valueChanges). object: {onlySelf: true, emitEvent: false}

Answer 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");

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

Answer 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+',
}