Отключить поле в угловой реактивной форме

Question

В моем угловом приложении 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>

Здесь я использовал

<div *ngIf="creds.value.action=='set' || creds.value.action=='go'"> <input placeholder="Label" formControlName="label"> </div>

, который будет отображать поле label, если условие истинно или не будет отображаться.

Но мне нужно только отключить это поле и не следует его полностью удалять..

Для чего я пробовал,

<input [disabled]="creds.value.action != 'set' || creds.value.action != 'go' " placeholder="Label" formControlName="label">

Но это не работает.

Stackblitz с * ngIf https://stackblitz.com/edit/angular-form-array-example-25y1ix

Stackblitz с отключенным https://stackblitz.com/edit/angular-form-array-example-laftgu

Пожалуйста, помогите мне, как отключить поле label, если выбрано action (первый выпадающий список)значение wait ..

Answer 1

В Реактивной форме вы не можете использовать отключенную директиву.Вместо этого вам нужно отключить formControl «реактивный путь», вызвав функцию enable () или disable ().

addCreds() {
    const creds = this.form.controls.credentials as FormArray;
    const newGroup = this.fb.group({
      action: '',
      name: '',
      label: ''
    });
    newGroup.controls.action.valueChanges.subscribe((currentAction) => {
      if (typeof currentAction === "string" && currentAction.toLowerCase() === 'wait') {
        newGroup.controls.label.disable();
      } else {
        newGroup.controls.label.enable();
      }
    });
    creds.push(newGroup);
  }

Я изменил ваш пример стекаблица: https://stackblitz.com/edit/angular-form-array-example-ymysw4

Answer 2

Просто создайте класс 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';
}

Используйте этот метод в своем шаблоне:

<input 
    [class.disabled]="getValueByIndex(i)" 
    placeholder="Label" 
    formControlName="label">

---

Вот Рабочий образец StackBlitz для вашего реф.

---

ОБНОВЛЕНИЕ:

В качестве альтернативы выможет сделать следующее:

Сделать поле label отключенным по умолчанию:

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

И затем прослушать событие (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>

---

Вот Рабочий образец StackBlitz для этого подхода.

---

Спасибо А. Виннену за егокомментирует последствия использования предыдущего подхода для производительности.