Angular Reactive forms - disabled attribute

I have HTML code with some disabled fields that have different conditions for mark a check-box as dissabled:

<!-- RECIPIENTS -->
<div class="row mb-4 mt-2">
<div class="col-12" formArrayName="recipients">
<label class="mb-2">{{ departmentsOfSystem.includes(role.toLowerCase()) ? 'Sistemas destinatarios:' : 'Equipos destinatarios:' }}</label>

<div class="d-flex justify-content-start flex-wrap">
<mat-checkbox
*ngFor="let recipient of getRecipientsByRoleAndTeam(role)"
class="mr-3"
[name]="recipient?.id"
[checked]="recipient.checked"
[disabled]="(recipient.id === 'GCRG' && !isCdGSelected()) || getDisabledRecipient(recipient)"
(change)="onChangeRecipientState($event)"
>
{{ recipient.description }}
</mat-checkbox>
</div>

<div *ngIf="role.toLowerCase() == 'cdg'">
<label class="mb-2 mt-2">Autovalidación: </label>

<div class="d-flex justify-content-start flex-wrap">
<mat-checkbox
*ngFor="let recipient of getRecipientsByRoleAndTeam(role, 'VALIDACION')"
class="mr-3"
[name]="recipient?.id"
[checked]="recipient.checked"
[disabled]="!isCdGRole() || !isCdGSelected() || getDisabledRecipient(recipient)"
(change)="onChangeRecipientState($event)"
>
{{ recipient.description }}
</mat-checkbox>
</div>
</div>
</div>
</div>


The code works perfectly but I keep having the console message:

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


I tried the [attr.disabled] but the message keeps coming out or at some points the component stops working.

How can I handle this error and keep my code with the disabled attributes for the same FormArray?

Continue reading...