Question

我正在开发Angular应用程序，在其中使用表单组中的复选框。我有多个文本输入的第二个表单组。当启用其他形式的特定复选框时，我想以第二种形式启用所选文本输入。

FormGroup1

 <div class="list"> 
    <form [formGroup] = "f1FormGroup" (ngSubmit)="f1(f1FormGroup.value)" #form1 = "ngForm" >
        <h2>i1</h2>
        <h5> <input type="checkbox" name="i1" value="i1" [(ngModel)]="i1.isChecked" > i1 </h5>
        <h5><input type="checkbox" name="i2" value="i2" [(ngModel)]="i2.isChecked" > i2  </h5>
    </form>
</div>

FormGroup2

<div id="i1m" class="modal">
    <!-- Modal content -->
        <div  class="col-sm-5">
            <span class="close" (click) = "close1()">&times;</span>
            <h2>RV</h2>  
            <form class="st" [formGroup] = "i1mFormGroup">  
                <h6>Material</h6>
                <input type="text" id="m1" placeholder="Optional" name="m1" value="m1">
                <h6>TC</h6>
            <select matNativeControl required>
                <option value="1">C</option>
                <option value="2">H</option>
                <option value="2">S</option>
            </select>
            <h6>SH</h6>
            <input type="text" id="m2" placeholder="1" disabled>
            <button mat-button type="submit" (click) = "save1()">Save</button> 
        </form>     
    </div> 
</div>

component.ts

t1(i1){
    if(this.i1.isChecked){
        document.getElementById("i1m").style.display = "block";
    } else{

        document.getElementById("i1m").style.display = "none";
    }
}

close1(){
    document.getElementById("i1m").style.display = "none";
}

save1(){
    document.getElementById("i1m").style.display = "none";
}

仅在选中formgroup1中的i2复选框并显示带有m2文本框的formgroup2时，我才想启用id为m2的formgroup2中的文本框。如果选中了i1，则应显示不带m2文本框的formgroup2。请通过这个指导我。预先感谢。

编辑：我的i1FormGroup（FormGroup2）是一个弹出模式，它会分别为f1FormGroup（FormGroup1）中选中的每个复选框弹出。根据选中的复选框，启用或禁用输入。输入一次后，其他输入值保持不变。

我添加了一个StackBlitz，并在底部的App.components.ts页面中的注释中进行了简要说明。请检查一下。 StackBlitz

Answer 1

首先。请勿将ngModel与反应形式一起使用。其次，不要操纵DOM。 Angular通常有自己的工具来做您想要的事情。在这种情况下，我已经停止了所有反应，根据复选框状态，您可以在formcontrols上调用disable()或enable()。这是一个示例：

constructor(private fb: FormBuilder) {
  // form with checkboxes
  this.f1FormGroup = this.fb.group({
    cb1: [false],
    cb2: [false]
  })

  // form with inputs
  this.i1mFormGroup = this.fb.group({
    inp1: [''],
    inp2: ['']
  })

  // listen to the changes of the checkboxes and disable/enable when wanted
  this.f1FormGroup.valueChanges.subscribe((value) => {
    value.cb1 ? this.i1mFormGroup.get('inp1').disable() : this.i1mFormGroup.get('inp1').enable()
  })
}

然后将formControlName添加到模板中，然后删除ngModel。

这是一个演示： StackBlitz

基于复选框值启用/禁用输入表单字段

1 个答案: