Угловые реактивные формы на заказ валидатора. Включить проверку только при установленном флажке - PullRequest
Новая
       75

Угловые реактивные формы на заказ валидатора. Включить проверку только при установленном флажке

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

У меня проблема с проверкой флажка, который отмечен только. Сначала, когда компонент инициализируется и все флажки отключены, если они нажимают кнопку «Сохранить», должна появиться проверка, которая говорит, что вы не установили ни один флажок. Вторая проверка - это когда вы отметили флажок, но не указали количество, оно должно только пометить, что «Это поле обязательно для заполнения». Однако теперь, когда я нажимаю кнопку «Сохранить», все количество, даже если оно отключено, появляется сообщение «Это поле обязательно для заполнения». Как я могу решить это? Пожалуйста, также мои комментарии функции, может быть, это поможет. Спасибо.

Пожалуйста, нажмите здесь для моей ссылки на стек: КОДОВАЯ ССЫЛКА 

patchValues() {
    let rows = this.myForm.get('rows') as FormArray;
    this.orders.forEach(material => {
      material.materials.forEach(x => {
        rows.push(this.fb.group({
          checkbox_value: [null],
          material_id: new FormControl({ value: x.id, disabled: true }, Validators.required),
          material_name: x.name,
          quantity: [null]
        }));
        // this.formArrayLength++;
      });
    });
  }

1 Ответ

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

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

Форма действует только при установленном флажке. И выглядит как 

formValidator(control: AbstractControl): { [key: string]: any } {
   return control.value.rows.some(i => i.checkbox_value) ? null : { 'checkboxReq': 'Some checkbox field is required' }
}

Добавьте его к себе 

this.myForm.setValidators([this.formValidator.bind(this)])

В шаблоне вы можете получить его с помощью myForm.getError('checkboxReq')

<small class="form-text text-muted danger">{{myForm.getError('checkboxReq')}}</small>

Для подчиненной формы нужен другой валидатор 

subFormValidator(control: AbstractControl): { [key: string]: any } {
   return control.value.checkbox_value ? { 'req': 'This field is required' } : null
}

Добавьте его, когда вы инициализируете свою подформу. 

(this.fb.group({
      checkbox_value: [null],
      material_id: [{ value: x.id, disabled: true }],
      material_name: x.name,
      quantity: [null]
    }, [this.subFormValidator.bind(this)]));

Template 

<small class="form-text text-muted danger" *ngIf="row.invalid && row.touched">This field is required</small>

пример стекаблика с изменениями

...