反应式表单 - 禁用属性

我正在尝试使用disabled属性来自于formControl。当我将其放入模板中时，它会起作用：

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

但浏览器警告我：

看起来您正在将禁用属性与反应式表单一起使用 指示。如果您将禁用设置为 true 当您在组件类中设置此控件时，disabled 属性实际上将在 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);
}

但它不起作用（它并没有禁用input）。问题是什么？

我一直在使用[attr.disabled]因为我仍然喜欢这个模板驱动而不是编程式的enable()/disable()，因为它在我看来更优越。

Change

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

to

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

如果您正在更换新材料md-input to mat-input.