在反应式表单中签入复选框时启用 [英] Enable When Checkbox is Check in Reactive Forms

问题描述

我需要帮助才能仅在选中复选框时启用行.默认行应该被禁用，但当复选框只被选中时，该行将被启用.这是我的代码的链接

I need help in making the rows enable only when the checkbox is check. The default rows should be disabled but when the checkbox is only check, that row will be enabled. Here's the link to my code

链接代码

  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]
      }))
    })
      })

  }

推荐答案

看看演示 &来源

Have a look at the Demo & Src

Stack Blitz, Fork

说明:

1. 要启用或禁用输入字段，您需要使用以下语法 [attr.disabled]="myForm.get('rows').value[i].checkbox_value ? null: ''"
2. attr.disabled，这里的attr用于绑定不直接存在于元素上的属性
3. myForm.get('rows').value[i].checkbox_value，是对表单控件值的直接访问.

1. For enabling or disabling a input field, you need to use the following syntax [attr.disabled]="myForm.get('rows').value[i].checkbox_value ? null: ''"
2. attr.disabled, here attr is for binding with properties which don't exist directly on an element
3. myForm.get('rows').value[i].checkbox_value, is fairly straight forward access to a form control's value.

这篇关于在反应式表单中签入复选框时启用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！