反应式表单-已禁用属性
我正在尝试使用formControl中的disabled属性。当我把它放到模板中时，它起作用了：
<md-input formControlName="id" placeholder="ID" [disabled]="true"></md-input>但是浏览器提醒我：
它看起来像是将disabled属性与reactive form指令一起使用。如果在组件类中设置此控件时将disabled设置为true，则实际上会在DOM中为您设置disabled属性。我们建议使用这种方法来避免“检查后更改”错误。
示例: form = new FormGroup({ first: new FormControl({value：'Nancy'，disabled: true}，Validators.required)，last: new FormControl('Drew'，Validators.required) })；
所以我把它放在FormControl中，并从模板中删除：
constructor(private itemsService: ItemsService) {
this._items = [];
this.myForm = new FormGroup({
id: new FormControl({value: '', disabled: true}, Validators.required),
title: new FormControl(),
description: new FormControl()
});
this.id = this.myForm.controls['id'];
this.title = this.myForm.controls['title'];
this.description = this.myForm.controls['description'];
this.id.patchValue(this._items.length);
}但是它不工作(它没有禁用input)。有什么问题吗？
回答 18
Stack Overflow用户
发布于 2017-10-26 22:29:46
我一直在使用[attr.disabled]，因为我仍然喜欢这个模板驱动，而不是编程的enable()/disable()，因为它是更好的IMO。
变化
<md-input formControlName="id" placeholder="ID" [disabled]="true"></md-input>至
<md-input formControlName="id" placeholder="ID" [attr.disabled]="true"></md-input>如果您使用的是较新的材料，请将md-input更改为mat-input。
Stack Overflow用户
发布于 2019-11-13 14:45:39
在我使用Angular 8的情况下。我想根据情况切换输入的启用/禁用。
[attr.disabled]不适合我，所以这是我的解决方案。
我从HTML中删除了[attr.disabled]，并在组件函数中执行了以下检查：
if (condition) {
this.form.controls.myField.disable();
} else {
this.form.controls.myField.enable();
}Stack Overflow用户
发布于 2018-06-07 20:48:18
您可以使用以下方法启用/禁用表单控件：
control.disable()或control.enable()
如果这不起作用，可以使用一个指令
import { NgControl } from '@angular/forms';
@Directive({
selector: '[disableControl]'
})
export class DisableControlDirective {
@Input() set disableControl( condition : boolean ) {
const action = condition ? 'disable' : 'enable';
this.ngControl.control[action]();
}
constructor( private ngControl : NgControl ) {
}
}然后你可以像这样使用它
<input [formControl]="formControl" [disableControl]="disable">
<button (click)="disable = true">Disable</button>
<button (click)="disable = false">Enable</button>这项技术如下所述：
希望能有所帮助
https://stackoverflow.com/questions/40494968
复制相似问题