Reactive forms - disabled attribute
<p>I am trying to use the <code>disabled</code> attribute from a <code>formControl</code>. When I put it in the template, it works:</p>

<pre><code>&lt;md-input formControlName="id" placeholder="ID" [disabled]="true"&gt;&lt;/md-input&gt;
</code></pre>

<p>But the browser alerts me:</p>

<blockquote>
  <p>It looks like you're using the disabled attribute with a reactive form
  directive. If you set disabled to true
        when you set up this control in your component class, the disabled attribute will actually be set in the DOM for
        you. We recommend using this approach to avoid 'changed after checked' errors.</p>

<pre><code>  Example: 
  form = new FormGroup({
    first: new FormControl({value: 'Nancy', disabled: true}, Validators.required),
    last: new FormControl('Drew', Validators.required)
  });
</code></pre>
</blockquote>

<p>So I put it in the <code>FormControl</code>, and deleted from the template:</p>

<pre><code>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);
}
</code></pre>

<p>But it does not work (it is not disabling the <code>input</code>). What is the problem?</p>