Angular 8 - reactive form Directive and disabled attribute

Question

After I upgraded from Angular 7 to Angular 8 in an application the [disabled] stopped working in various parts of the template. And to load the application I needed to change to [attr.disabled]. I still don’t quite understand why 'attr'.'

But anyway disabled in one of the parts of the site ceased to function as before. The idea was that the user could select up to 5 tags within a multi-tag seal. If he selected 5 tags it would be disabled. If he took the selection leaving 4 or less enabled again. And at angle 8 it stopped working and now appears the error below

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)
      });

HTML

...
<div class="form-group col-5 col-md-3" *ngFor="let tag of tags" [attr.disabled]="desabilitar(tag)">
...

Typescript

...
    public desabilitar(tag: Tag): boolean {
        return !this.exists(tag) && this.tagsEmpresa.length === 5;
    }
...

Answer 1

This error is shown in Development mode, to warn about inconsistency in the app’s operation.

You must have started the form group without setting the disabled, i.e. false, and in the same lifecycle hook was changed to true, what caused this error.. This is a warning because neither the angular nor yourself can know how to handle the status of the app if the value has been changed in Runtime.

Only in development mode is detected because the component is rendered twice to check whether the data has been rendered consistently.

The way that the attr solves this by overriding the value that would be dynamically set by the form Builder, but not the property of the DOM element that had to be rendered in Lifecycle.

You can read more about Development mode and what happens in the rendering Lifecycle in this link