Angular2 enable/disable formcontrol on http response not working

Question

I have formcontrol, when i provide [disable]="xyz" where xyz is variable in component assign from http response, angular2 give following warning.

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.

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

So i tried disable using following but not working

this.form = this.fb.group({'type': [{ value: '', disabled: this.xyz },[Validators.required]]});

Answer 1

You can do something like this:

yourHttpFunction(){
 if(controlShouldBeDisabled){
  this.form.controls['first'].disable()
 }

}