2 Пользовательский валидатор не работает в реактивных формах в Angular - PullRequest
Новая
       83

2 Пользовательский валидатор не работает в реактивных формах в Angular

0 голосов
/ 18 сентября 2018

Мне нужно выяснить, как я смогу добавить второй валидатор в мои реактивные формы.Я добавил «AvailabilityBalanceValidator» в patchValues ​​(), который инициализирует строки.Однако работает только первый валидатор, почему второй валидатор, который является AvailabilityBalanceValidator (), не работает.Пожалуйста, проверьте эту ссылку ПРОВЕРЬТЕ ЭТУ ССЫЛКУ 

patchValues() {
    const materialForms = this.orders
      .reduce((acc, i) => [...acc, ...i.materials], [])
      .map(x => {
        return (this.fb.group({
          checkbox_value: [null],
          material_id: [{ value: x.id, disabled: true }],
          material_name: x.name,
          available_qty: 10,
          quantity: [null]
        }, [this.subFormValidator.bind(this), { validator: this.AvailabilityBalanceValidator('available_qty', 'quantity') }]));
      });

    this.myForm.setControl('rows', this.fb.array(materialForms));
    this.myForm.setValidators([this.formValidator.bind(this)])
  }

  AvailabilityBalanceValidator(campo1: string, campo2: string) {
    return (group: FormGroup): { [key: string]: any } => {
      const balance = group.controls[campo1];
      const quantity = group.controls[campo2];
      if (balance.value < quantity.value) {
        return {
          out: true
        };
      }
    };
  }

1 Ответ

0 голосов
/ 19 сентября 2018

Я выяснил, почему ваш второй валидатор не работает.На самом деле добавление валидаторов неверно.

Вы назначили массив валидаторов в качестве второго параметра метода this.fb.group(): 

this.fb.group({...}, [this.subFormValidator.bind(this), { validator: this.AvailabilityBalanceValidator('available_qty', 'quantity') }];

Метод FormBuilder.group получает в качестве второго параметра объект с двумя возможными параметрами validator и asyncValidator (см. документы ).

Чтобы исправить недостающую проверку, вы должны изменить свой код следующим образом: 

this.fb.group({...}, {
    validator: Validators.compose([this.subFormValidator.bind(this), this.AvailabilityBalanceValidator('available_qty', 'quantity')])
};

Обновление: 

subFormValidator(control: AbstractControl): { [key: string]: any } {
    return control.value.checkbox_value && 
        // Only adds the error if quantity is not set or it's an empty string
        (!control.value.quantity || control.value.quantity.length === 0)? { 'req': 'This field is required' } : null
}

И в вашем html: 

<small class="form-text text-muted danger" *ngIf="row.hasError('req')">This field is required</small>

Потому что в противном случае сообщение всегда отображается, если элемент управления имеет ошибку.

...