无效表单 - 禁用属性

Question

我正在尝试使用formControl中的disabled属性。当我把它的模板，它的工作原理：

<md-input formControlName="id" placeholder="ID" [disabled]="true"></md-input> 

但浏览器提醒我：

它看起来像你使用一个反应形式 指令禁用属性。如果在组件类中设置此控件时将禁用属性设置为true ，那么将禁用属性实际上设置为DOM中的 您。我们建议使用这种方法来避免“检查后更改”错误。

Example: 
    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); 
} 

但它不工作（它不禁止输入）。问题是什么？

Answer 1

我一直在使用 [attr.disabled]

GitHub上的问题是因为我仍然喜欢这个模板驱动比编程启用（）/禁用（），因为它是优越的国际海事组织。

变化

<md-input formControlName="id" placeholder="ID" [disabled]="true"></md-input>

到

<md-input formControlName="id" placeholder="ID" [attr.disabled]="true"></md-input>

如果你是新的重大变化MD-输入mat-input。

Answer 2

将名称属性添加到您的md输入。如果它不能解决问题，请发布您的模板

Answer 3

要解决此问题，您可以尝试这样。

为禁用

this.myForm.controls['id'].disable(); 

为使

this.myForm.controls['id'].enable(); 

更多参考经历张贴在与此相关的 https://github.com/angular/angular/issues/11271#issuecomment-244507976

Answer 4

使用[attr.disabled]而不是[禁用]，在我的情况下，它的工作原理确定