以角度反应形式禁用字段 [英] Disable a field in angular reactive form

问题描述

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

HTML

<h2>点击下方的添加按钮</h2><按钮(点击)="addCreds()">添加</button><div formArrayName="凭据" ><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}}</选项></选择><input placeholder="Name" formControlName="name"><div *ngIf="creds.value.action=='set' ||creds.value.action=='go'"><input placeholder="Label" formControlName="label">

</表单>

这里我用过

<input placeholder="Label" formControlName="label">

如果条件为真，将显示字段label，否则不会显示.

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

我已经尝试过，

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

但它不起作用.

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

禁用的Stackblitz https://stackblitz.com/edit/angular-form-array-example-laftgu

如果所选的 action(第一个下拉列表)值为 wait..

，请帮助我如何禁用 label 字段

解决方案

只需创建一个 CSS 类:

.disabled {指针事件:无；背景色:#D3D3D3；}

向组件添加方法:

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

在您的模板中使用此方法:

<输入[class.disabled]="getValueByIndex(i)"占位符=标签"formControlName="标签">

<小时><块引用>

这是一个 工作示例 StackBlitz 供您参考.

<小时>

更新:

或者，您可以执行以下操作:

默认禁用 label 字段:

addCreds() {const creds = this.form.controls.credentials as FormArray;creds.push(this.fb.group({行动: ''，姓名: ''，标签: {价值: ''，禁用:真},状态:'na'}));}

然后监听表单上的(ngModelChange)事件更新标签字段的状态:

<选择表单控件名称=动作"(ngModelChange)="($event === 'set' || $event === 'go') ? creds.controls.label.enable() : creds.controls.label.disable()"><选项*ngFor="让数据选项"[value]="option.key">{{option.value}}</选项></选择>

<小时>

这是一个 此方法的工作示例 StackBlitz.

<小时>

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

In my angular 6 application, i am making a reactive form which has,

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>

Here i have used

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

which will display the field label if the condition is true or else it will not be displayed.

But i need to only disable that field and should not remove it completely..

For which i have tried,

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

But it doesn't works.

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

Stackblitz with disabled https://stackblitz.com/edit/angular-form-array-example-laftgu

Kindly help me how to disable the label field if the selected action (first dropdown) value is wait..

解决方案

Just create a CSS class:

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

Add a method to your Component:

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

Use this method in your template:

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

---

Here's a Working Sample StackBlitz for your ref.

---

UPDATE:

Alternatively, you can do the following:

Make the label field disabled by default:

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

And then listen to the (ngModelChange) event on the form to update the state of the label field:

<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>

---

Here's a Working Sample StackBlitz for this approach.

---

Thanks to A.Winnen for his comments on the performance implications of using the previous approach.

这篇关于以角度反应形式禁用字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！