Блог

У меня есть реактивная форма, и в зависимости от свойства fooRequired я хочу сделать поле обязательным или нет.

Я не могу это изменить, потому что он установлен на начальном уровне. итак, что я могу сделать?

 fooRequired = false;

form = new FormGroup({
 foo: new FormControl(null, [Validators.required])
});

toggle() { this.fooRequired = !this.fooRequired; }
 

Следующее сделает свое дело:

 toggle() {
  this.fooRequired = !this.fooRequired;
  this.form.controls.foo.setValidators(this.fooRequired ? null : [Validators.required]);
  this.form.controls.foo.updateValueAndValidity();
}
 

Здесь, на основе fooRequired логического значения, валидаторы устанавливаются или удаляются. Наконец, новые настройки элемента управления формой обновлены.

Вы можете использовать пользовательскую функцию, которая будет отвечать за добавление или удаление Validators

 export function conditionalValidator(
  predicate: BooleanFn,
  validator: ValidatorFn,
  errorNamespace?: string
): ValidatorFn {
  return formControl => {
    if (!formControl.parent) {
      return null;
    }
    let error = null;
    if (predicate()) {
      error = validator(formControl);
    }
    if (errorNamespace amp;amp; error) {
      const customError = {};
      customError[errorNamespace] = error;
      error = customError;
    }
    return error;
  };
}
 

Затем вы можете использовать его внутри элемента управления формой:

 this.myForm = this.fb.group({
  myEmailField: [
    "",
    [
      // some normal validatiors
      Validators.maxLength(250),
      Validators.minLength(5),
      Validators.pattern(/. @. .. /),
      // custom validation
      conditionalValidator(
        // depends on fooRequired value
        () => this.fooRequired,
        Validators.required,
        "illuminatiError"
      )
    ]
  ]
});
 

Наконец, вы можете переключить значение fooRequired и посмотреть результат:

   toggle() {
    this.fooRequired = !this.fooRequired;
    this.myForm.get("myEmailField").updateValueAndValidity();
  }
 

Вот живая демонстрация, которая поможет вам в реализации приведенного выше ответа

Вам нужно использовать setValidator() and updateValueAndValidity() для вашего элемента управления формой foo на основе переменной fooRequired. Эти две функции будут динамически обновлять проверку.

Демонстрация: https://stackblitz.com/edit/angular-setvalidators-jec7jo?file=src/app/app.component.ts

Подробнее для чтения: https://www.tektutorialshub.com/angular/how-to-add-validators-dynamically-using-setvalidators-in-angular/