Angular 2: применить проверку Validator.required при некоторых условиях

У меня есть форма angular 2, в которой я должен сделать поле обязательным при некоторых условиях, например:

description:  ['', Validators.required]

Это поле описания потребуется только для некоторых типов условий, таких как:

if(true){descReq = true};

Как я могу этого добиться, пожалуйста, предложите. Заранее спасибо!


person Abhishek    schedule 15.02.2017    source источник
comment
Что это за другое условие?   -  person pixelbits    schedule 15.02.2017


Ответы (4)


Вы можете добавить или удалить валидатор на основе значения другого элемента управления в форме:

    testForm: FormGroup;

    constructor(private formBuilder: FormBuilder) {
      this.testForm = this.formBuilder.group({
        condition: [''],
        description: ['']
      });

      this.testForm.controls['condition'].valueChanges.subscribe(result => {
        if (result) {
          this.testForm.controls['description'].setValidators(Validators.required);
          this.testForm.controls['description'].updateValueAndValidity();
        } else {
          this.testForm.controls['description'].setValidators(null);
          this.testForm.controls['description'].updateValueAndValidity();
        }
      });
    }
person JayChase    schedule 15.02.2017

Если descReq необходимо оценивать во время выполнения (а не при его инициализации), то, возможно, вам следует создать собственный валидатор:

import { ValidatorFn, AbstractControl } from '@angular/forms';
interface ValidationResult {
    [key:string]:boolean;
}
function customValidator(condition: { required:boolean }) {
     return (control: AbstractControl) :ValidationResult  => {
         return condition.required && 
             (control.value == undefined || 
              control.value == null || 
              control.value.trim() =='') ? 
              {
                 'required': true
              }: null;

       }

}

Используйте так:

description:  ['', customValidator(this.reqd)]

где reqd был инициализирован ранее и, возможно, даже привязан к данным:

reqd = { required: false };
person pixelbits    schedule 15.02.2017
comment
Спасибо за ответ, но он выдает мне ошибку: «Ошибка: ошибка в: 0: 0, вызванная: не удается прочитать свойство «требуется» из неопределенного» - person Abhishek; 15.02.2017
comment
вам нужно инициализировать this.condition - person pixelbits; 15.02.2017
comment
Он инициализируется в конструкторе. Я консольно зарегистрировал this.condition как внутри конструктора, так и в методе required(). Он инициализируется внутри конструктора, но дает неопределенность внутри метода. - person Abhishek; 15.02.2017
comment
ах, мой плохой. Да, передача такой ссылки fn изменит значение this. Я обновил его до заводской функции - должно работать. - person pixelbits; 15.02.2017
comment
метод не вызывается при изменении условия. Например, когда условие меняется с ложного на истинное, эта функция должна быть вызвана. В данном случае не происходит? - person Abhishek; 15.02.2017
comment
Кажется, работает для меня. github.com/pixelbits-mk/angular2-starter-app/tree/ КодКаро . - person pixelbits; 15.02.2017

Вы должны установить валидатор в поле императивно против декларативно.

Декларативно (ваш текущий код):

const description = new FormControl('', Validators.required);

Обязательно:

const description = new FormControl('');
if (someCondition) {
  description.setValidators(Validators.required);
}
person AngularChef    schedule 15.02.2017

Вы можете просто использовать Validators.requiredTrue

description: [false, Validators.requiredTrue]

person Azhr-M    schedule 12.11.2020