docs-bug(mat-form-field): `required` does not work in the custom form field control guide

[AlexElin]

Documentation Feedback

I need to lock a Submit button when a custom form-field control is empty.
I slightly changed the source Stackblitz example by adding a Submit button (s/b disabled when a form is invalid) and a Name control + setting Validators.required in the form model.

Current behavior: When filling only Name (the Phone number is empty) the form transits to valid state and the button is enabled.

Expected behavior: the button must be disabled because the Phone number is empty.

My Stackblitz: https://stackblitz.com/edit/angular-mdsmxs?file=src%2Fapp%2Fform-field-custom-control-example.html

Affected documentation page: https://material.angular.io/guide/creating-a-custom-form-field-control
https://run.stackblitz.com/api/angular/v1?file=src%2Fapp%2Fform-field-custom-control-example.ts

[AlexElin]

I've mentioned that if I fill and then clear the phone number field, the validation works.

[Captainnik53]

Hey, there. @AlexElin

The problem here is not related to required.

The MatFormFieldControl in the above example returns value only if the parts formGroup is valid, otherwise returns null value. But on the other hand, initial value of tel formControl is not null which bypasses the required validator and hence it remains valid unless changed.

get value(): MyTel | null { if (this.parts.valid) { const { value: { area, exchange, subscriber }, } = this.parts; return new MyTel(area, exchange, subscriber); } return null; }

Solution - Make initial value of tel formControl null, which makes it invalid from the start itself.

Here, is a working stackblitz - https://stackblitz.com/edit/angular-mdsmxs-rgjbrh?file=src%2Fapp%2Fform-field-custom-control-example.ts

Hope this solves your problem. Also, have raised a PR for correcting the documentation.

CC: @andrewseguin

[angular-automatic-lock-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.}