Включите, когда установлен флажок Проверка в реактивных формах

Question

Мне нужна помощь, чтобы включить строки только тогда, когда флажок установлен. Строки по умолчанию должны быть отключены, но когда флажок установлен только, эта строка будет включена. Вот ссылка на мой код

КОДЫ ССЫЛКИ

  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, Validators.required]
      }))
    })
      })

  }

Answer 1

Посмотрите на Demo & Src

Стек Блиц, Вилка

Объяснение:

1. Для включения или отключения поля ввода вам необходимо использовать следующий синтаксис [attr.disabled]="myForm.get('rows').value[i].checkbox_value ? null: ''"
2. attr.disabled, здесь attr для связывания со свойствами, которые не существуют непосредственно в элементе
3. myForm.get('rows').value[i].checkbox_value, довольно прямой доступ к значению элемента управления формы.

Answer 2

Еще один подход - создать директиву

@Directive({
  selector: '[enabledControl]'
})
export class EnabledControlDirective {

    @Input() set enabledControl(condition: boolean) {
        if (this.ngControl) {
            if (this.ngControl.control) {
                if (condition)
                    this.ngControl.control.enable();
                else
                    this.ngControl.control.disable();
            }
        }
  }
  constructor(private ngControl : NgControl ) {
  }
}

Тогда вы можете использовать как

<input class="col-md-6" formControlName="quantity"
     [enabledControl]="row.get('checkbox_value').value" >