如何禁用角度动态控制

Question

我正在尝试使用此代码创建动态字段

formInputfieldsForm: FormGroup[];

    defaultFields: any = [
        { inputType: 'textbox', inputValues: '' },
        { inputType: 'textbox', inputValues: '' },
      ]
    
     createForm(a?: any, b?: any, c?: any): FormGroup {
        return this.formService.group({
          "inputType": [b, Validators.required],
          "inputValues": [c, Validators.required],
        })
      }
    
     addFields(){
        this.defaultFields.forEach((ele, i) => {
          this.formInputfieldsForm.push(this.createForm(ele?.inputType, ele?.inputValues));
        });
      }

    createFieldsForm(): FormGroup {
    return this.formService.group({
      "inputType": [null, Validators.required],
      "inputValues": [null, Validators.required],
    })
  }

 
  addFields(){
    this.formInputfieldsForm.push(this.createFieldsForm());
  }

每次

addFields

被调用时都会创建新的动态字段

在前端我使用循环来渲染这样的元素

<div *ngFor="let expForm of formInputfieldsForm; let i = index;" [formGroup]="expForm">
 
<select class="hand_symbol" formControlName="inputType"  placeholder="Select Input Type">
                                                <option value="">Select</option>
                                                <option value="textbox">Textbox</option>
                                                <option value="dropdown">Drop Down</option>
                                                <option value="textarea">Textarea</option>
                                              </select>

<input class="form-control" formControlName="inputValues" type="text" placeholder="Enter Values" type="text">
</div>



<span title="Add" (click)="addFields()">add</span>

它现在渲染，我需要默认情况下

inputValues

控件应该被禁用，如果我从选择控件中选择下拉菜单，那么只有它应该被启用

任何解决方案谢谢

Answer 1

假设

formService

是

FormBuilder

的实例。创建表单时，数组中的第一项要么是初始值，要么是具有

value

和

disabled

属性的对象。如果您想最初禁用 inputValues 字段，您可以更改

addField

函数，如下所示：

createFieldsForm(): FormGroup {
  return this.formService.group({
    "inputType": [null, Validators.required],
    "inputValues": [{ value: null, disabled: true }, Validators.required],
  })
}