[attr.disabled] on reactive form not working as expected

Bug Report

Affected Package

The issue is caused by package @angular/material or @angular/forms

Is this a regression?

I have no idea, when I’m checking on internet, it seems that it worked some time ago, there’s a lot of place where you’re asked to use [attr.disabled].

Description

I’m using a Reactive Form to control a mat-slide-toggle.

Let’s say I have 2 mat-slide-toggle, the first one disable the second one and the second one disable the first one. I’d like to achieve this by using [attr.disabled].

If i’m using [disabled] it work as expected but I’m getting a warning in the console, saying that it’s modifying the DOM.

Minimal Reproduction

In this example the first one should be disable as I’m using [attr.disabled]="true" and the second one enabled as I’m using [attr.disabled]="false" (even if it’s enabled by default).

If I put directly in the constructor ... { value: false, disabled: true} ... for the first one, then it’s being properly disabled.

I’d like to control this behavior using [attr.disabled].

https://stackblitz.com/edit/angular-ew3gr6

Your Environment

Also happen on Angular 12 since it’s what’s being used by stackblitz.

     _                      _                 ____ _     ___ 
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | | 
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | | 
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/

Angular CLI: 11.2.11
Node: 14.16.1
OS: win32 x64

Angular: 11.2.12
... animations, common, compiler, compiler-cli, core, forms
... language-service, localize, platform-browser
... platform-browser-dynamic, router
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1102.11
@angular-devkit/build-angular   0.1102.11
@angular-devkit/core            11.2.11
@angular-devkit/schematics      11.2.11
@angular/cdk                    11.2.11
@angular/cli                    11.2.11
@angular/material               11.2.11
@schematics/angular             11.2.11
@schematics/update              0.1102.11
rxjs                            6.6.7
typescript                      4.1.5

[Airblader]

You need to enable/disable the component through the form control associated with it (FormControl#enable, FormControl#disable). You can subscribe to the value changes of each control to trigger disabling the other one. That’s what the “reactive” in “reactive forms” stands for, as opposed to the template-driven approach.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}