Description
Is this a regression?
- Yes, this behavior used to work in the previous version
The previous version in which this bug was not present was
No response
Description
I noticed a weird behaviour in my reactive forms when using Angular Universal (SSR). When a formcontrol is used with a "mat-radio-group" it will always have the state "touched" when rendered on the server. When I want to show validation messages only for form controls that were actually touched this will result in a short flicker of the validation message when loading the page initially. The same problem also occurs for "mat-slide-toggle", but not for normal input fields.
Reproduction
Cannot include reproduction link, since this is requiring Angular universal and a node server.
Component
@Component({
selector: 'page',
templateUrl: './page.component.html',
styleUrls: ['./page.component.scss']
})
export class PageComponent extends BaseComponent {
protected formGroup = new FormGroup({
productKey: new FormControl<string | null>(null, Validators.required)
});
constructor() {
super();
}
}
HTML
<form [formGroup]="formGroup">
<mat-radio-group formControlName="productKey">
<mat-radio-button value="'A'">1</mat-radio-button>
</mat-radio-group>
{{ formGroup.controls.productKey.touched }}
</form>
Expected Behavior
"formGroup.controls.productKey.touched" should never be "true" when the page is loaded.
Actual Behavior
"formGroup.controls.productKey.touched" is"true" when the page is initially loaded from the server (Reloaded page, opened directly), then when the browser script is loaded it is set to false. This results in a short flicker, since the values are different. When the page is initially loaded by the browser (Through navigation) the value is false which is correct.
Environment
- Angular: 15.0.4
- CDK/Material:15.0.4
- Browser(s): Chrome, Edge
- Operating System (e.g. Windows, macOS, Ubuntu): Windows