Javascript 禁用角度反应形式的字段

在我的angular 6应用程序中，我制作了一个反应形式

Html

<form [formGroup]="form">

    <h2>Click the add button below</h2>
    <button (click)="addCreds()">Add</button>
    <div formArrayName="credentials" >
      <div *ngFor="let creds of form.get('credentials').controls; let i = index" 
          [formGroupName]="i" style="display: flex">
          <select formControlName="action">
             <option *ngFor="let option of options" value="{{option.key}}">
               {{option.value}} 
             </option>
          </select>
          <input placeholder="Name" formControlName="name">
<div *ngIf="creds.value.action=='set' ||
      creds.value.action=='go'">
                   <input placeholder="Label" formControlName="label">
          </div>
      </div>
    </div>
    </form>

单击下面的添加按钮
添加
{{option.value}}

这里我用过

如果条件为真，则将显示字段

标签

，否则将不显示

但我只需要禁用该字段，不应该完全删除它

我已经试过了

但它不起作用

使用*ngIf进行Stackblitz

禁用Stackblitz

---

如果所选的

操作

（第一个下拉菜单）值为

等待

，请帮助我如何禁用

标签

字段。

只需创建一个CSS类：

.disabled {
  pointer-events:none;
  background-color: #D3D3D3;
}

将方法添加到组件：

getValueByIndex(index) {
  const actionValue = ( < FormArray > this.form.get('credentials')).at(index).value.action;
  return actionValue !== 'set' && actionValue !== 'go';
}

然后收听表单上的

（ngModelChange）

事件以更新标签字段的状态：

<select 
  formControlName="action"
  (ngModelChange)="($event === 'set' || $event === 'go') ? creds.controls.label.enable() : creds.controls.label.disable()">
  <option 
    *ngFor="let option of data" 
    [value]="option.key">
    {{option.value}} 
  </option>
</select>

{{option.value}}

---

这里有一个用于此方法的示例

---

---

感谢A.Winnen对使用前一种方法的性能影响的评论。

在被动形式中，您不能使用禁用指令。相反，您需要通过调用enable（）或disable（）函数以“被动方式”禁用formControl

addCreds（）{
const creds=this.form.controls.credentials作为FormArray；
const newGroup=this.fb.group({
行动：“”，
名称：“”，
标签：“”
});
newGroup.controls.action.valueChanges.subscribe（（currentAction）=>{
if（typeof currentAction==“string”&¤tAction.toLowerCase（）==“wait”）{
newGroup.controls.label.disable（）；
}否则{
newGroup.controls.label.enable（）；
}
});
信用推送（新集团）；
}

---

我修改了stackblitz示例：

如果我不更改下拉列表，但有一些默认值，那么解决方案可能重复？？假设在操作中，我将默认值设置为

set

，那么相应的

标签

字段需要启用。。因为此解决方案仅适用于

ngModelChange

，但我需要这两种更改的结果，以及是否有一个默认值修补到

操作中。。
addCreds() {
  const creds = this.form.controls.credentials as FormArray;
  creds.push(this.fb.group({
    action: '',
    name: '',
    label: {
      value: '',
      disabled: true
    },
    state: 'na'
  }));
}

<select 
  formControlName="action"
  (ngModelChange)="($event === 'set' || $event === 'go') ? creds.controls.label.enable() : creds.controls.label.disable()">
  <option 
    *ngFor="let option of data" 
    [value]="option.key">
    {{option.value}} 
  </option>
</select>