禁用角反应形式的字段 [英] Disable a field in angular reactive form
问题描述
在我的angular 6应用程序中,我正在制作一个具有以下形式的反应形式,
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>
我在这里用过
<div *ngIf="creds.value.action=='set' || creds.value.action=='go'">
<input placeholder="Label" formControlName="label">
</div>
<div *ngIf="creds.value.action=='set' || creds.value.action=='go'">
<input placeholder="Label" formControlName="label">
</div>
如果条件为真,将显示字段label
,否则将不显示.
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..
我尝试过的
<input [disabled]="creds.value.action != 'set' ||
creds.value.action != 'go' " placeholder="Label" formControlName="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 with *ngIf https://stackblitz.com/edit/angular-form-array-example-25y1ix
已禁用的Stackblitz https://stackblitz .com/edit/angular-form-array-example-laftgu
如果所选的action
(第一个下拉列表)值为wait
,请帮助我如何禁用label
字段.
Kindly help me how to disable the label
field if the selected action
(first dropdown) value is wait
..
推荐答案
只需创建一个CSS类:
Just create a CSS class:
.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.
更新:
或者,您可以执行以下操作:
UPDATE:
Alternatively, you can do the following:
默认禁用label
字段:
addCreds() {
const creds = this.form.controls.credentials as FormArray;
creds.push(this.fb.group({
action: '',
name: '',
label: {
value: '',
disabled: true
},
state: 'na'
}));
}
,然后侦听表单上的(ngModelChange)
事件以更新标签字段的状态:
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.
感谢A.Winnen对使用以前方法的性能影响的评论.
Thanks to A.Winnen for his comments on the performance implications of using the previous approach.
这篇关于禁用角反应形式的字段的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!