Angular form control disabled binding not working

Viewed 30965

I have a form control that I disable when the page loads. When the user clicks a button the forms should become enabled for editing. However when I toggle the property that disabled the control nothing happens.

Template

<form [formGroup]='accountForm'>
  <md-input-container>
    <input mdInput formControlName='name' />
  </md-input-container>
  <button (click)='isEditing = !isEditing'>Edit</button>
</form>

Component

export class AccountComponent {
  private accountForm: FormGroup;
  private isEditing = false;
  private name: FormControl = new FormControl({ value: '', disabled: !isEditing; 

  constructor(
    formBuilder: FormBuilder
  ) {
    this.accountForm = formBuilder.group({
      'name': this.name
    });
  });
}
3 Answers
Related