在我的 Angular 6 应用程序中,我正在制作一个响应式(Reactive)形式,它具有,
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">
但它不起作用。
使用 *ngIf 的 Stackblitz https://stackblitz.com/edit/angular-form-array-example-25y1ix
Stackblitz 与残疾人 https://stackblitz.com/edit/angular-form-array-example-laftgu
请帮助我如何禁用 label
如果选择了字段 action
(第一个下拉菜单)值为 wait
..
最佳答案
只需创建一个 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">
Here's a Working Sample StackBlitz for your ref.
更新:
或者,您可以执行以下操作:
默认禁用 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>
这是一个 Working Sample StackBlitz对于这种方法。
感谢 A.Winnen 对使用先前方法的性能影响的评论。
关于javascript - 禁用 Angular react 形式的字段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53948456/