![](/img/trans.png)
[英]Disable a sibling button if reactive form field is not valid Angular 5
[英]Disable a field in angular reactive form
在我的角度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
如果所选action
(第一个下拉列表)值wait
请帮助我如何禁用label
字段。
只需创建一个CSS类:
.disabled {
pointer-events:none;
background-color: #D3D3D3;
}
向Component添加方法:
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 。
感谢A.Winnen对使用以前方法的性能影响的评论。
在Reactive Form中,您不能使用disabled指令。 相反,您需要通过调用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);
}
我修改了你的stackblitz示例: https ://stackblitz.com/edit/angular-form-array-example-ymysw4
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.