Angular动态表单：默认禁用inputValues控件，选Dropdown时启用

步骤1：初始化禁用inputValues并添加状态监听 #

修改表单创建方法，将inputValues控件初始化为禁用状态，同时添加监听逻辑，根据inputType的选择动态切换启用/禁用：

formInputfieldsForm: FormGroup[];

defaultFields: any = [
    { inputType: 'textbox', inputValues: '' },
    { inputType: 'textbox', inputValues: '' },
];

// 创建默认字段的表单组
createForm(a?: any, b?: any, c?: any): FormGroup {
    const formGroup = this.formService.group({
        "inputType": [b, Validators.required],
        // 初始禁用inputValues，设置默认值
        "inputValues": [{value: c, disabled: true}, Validators.required],
    });
    this.setupInputTypeListener(formGroup);
    return formGroup;
}

// 创建新增字段的表单组
createFieldsForm(): FormGroup {
    const formGroup = this.formService.group({
        "inputType": [null, Validators.required],
        "inputValues": [{value: null, disabled: true}, Validators.required],
    });
    this.setupInputTypeListener(formGroup);
    return formGroup;
}

// 监听inputType变化，控制inputValues状态
private setupInputTypeListener(formGroup: FormGroup): void {
    const inputTypeCtrl = formGroup.get('inputType');
    const inputValuesCtrl = formGroup.get('inputValues');

    if (!inputTypeCtrl || !inputValuesCtrl) return;

    // 初始化时检查初始值（适配defaultFields的预设值）
    if (inputTypeCtrl.value === 'dropdown') {
        inputValuesCtrl.enable();
    }

    // 监听类型选择变化
    inputTypeCtrl.valueChanges.subscribe(selectedType => {
        if (selectedType === 'dropdown') {
            inputValuesCtrl.enable();
        } else {
            inputValuesCtrl.disable();
            // 可选：切换非dropdown时清空输入值
            inputValuesCtrl.setValue('');
        }
    });
}

// 初始化默认字段
addFields(){
    this.defaultFields.forEach((ele, i) => {
        this.formInputfieldsForm.push(this.createForm(ele?.inputType, ele?.inputValues));
    });
}

// 添加新字段
addFields(){
    this.formInputfieldsForm.push(this.createFieldsForm());
}

步骤2：模板保持原有结构（可选优化） #

Angular响应式表单会自动同步控件的禁用状态到DOM，原模板无需修改。如果需要更直观的状态绑定，可添加[disabled]属性（推荐通过控件方法控制，避免模板与响应式逻辑冲突）：

<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"
    <!-- 可选：与控件状态同步，非必须 -->
    [disabled]="expForm.get('inputValues')?.disabled"
  >
</div>

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

注意事项 #

• 若需在提交时包含禁用控件的值，需使用formGroup.getRawValue()替代formGroup.value，因为value会忽略禁用控件：

  // 示例：收集所有字段的值
  collectFormValues() {
      return this.formInputfieldsForm.map(form => form.getRawValue());
  }
  

• 初始defaultFields中若有inputType为dropdown的项，监听逻辑会自动启用对应的inputValues控件。

内容的提问来源于stack exchange，提问作者user3653474