[英]Disable a field in angular reactive form
In my angular 6 application, i am making a reactive form which has, 在我的角度6应用程序中,我正在制作一个反应形式,
Html 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. 如果条件为真,将显示字段
label
,否则将不显示。
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与* ngIf https://stackblitz.com/edit/angular-form-array-example-25y1ix
Stackblitz with disabled https://stackblitz.com/edit/angular-form-array-example-laftgu 禁用Stackblitz 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
.. 如果所选
action
(第一个下拉列表)值wait
请帮助我如何禁用label
字段。
Just create a CSS class: 只需创建一个CSS类:
.disabled {
pointer-events:none;
background-color: #D3D3D3;
}
Add a method to your Component: 向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.
这是你的参考的工作样本StackBlitz 。
Alternatively, you can do the following: 或者,您可以执行以下操作:
Make the label
field disabled by default: 默认情况下禁用
label
字段:
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: 然后监听表单上的
(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>
Here's a Working Sample StackBlitz for this approach. 这是这种方法的工作样本StackBlitz 。
Thanks to A.Winnen for his comments on the performance implications of using the previous approach. 感谢A.Winnen对使用以前方法的性能影响的评论。
In Reactive Form you cannot use the disabled directive. 在Reactive Form中,您不能使用disabled指令。 Instead, you'll need to disable the formControl the 'reactive way' by calling enable() or disable() function.
相反,您需要通过调用enable()或disable()函数来禁用formControl“反应方式”。
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);
}
I modified your stackblitz example: https://stackblitz.com/edit/angular-form-array-example-ymysw4 我修改了你的stackblitz示例: https ://stackblitz.com/edit/angular-form-array-example-ymysw4
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.