javascript – Angular 8 – reactive form directive e disabled attribute

Question:

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

But anyway, the disabled in one of the parts of the site stopped working as before. The idea was that the user could select up to 5 tags within a multi-tag selection. If he selected 5 tags it was disabled. If he unchecked leaving 4 or less he would re-enable. And on angular 8 it stopped working and now the error below appears

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:

This error is shown in development mode, to warn about inconsistency in app functioning.

You should have started the form group without setting disabled, ie false , and in the same lifecycle hook was changed to true , which generated this error. This is a warning because neither angular nor yourself can handle the state of the app if the value has been changed at runtime.

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

The way attr solves this is by overriding the value that would be dynamically set by the form builder, but not the property of the DOM element that was to be rendered in the lifecycle.

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

Scroll to Top