無效表單 - 禁用屬性

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]而不是[禁用]，在我的情況下，它的工作原理確定