docs-bug(Guide: Creating a custom form field control): Missing Validators in FormGroup

[tobiasschweizer]

Documentation Feedback

In the example implementation of a MatFormFieldControl FormGroup is used. However, validation happens in the value getter:

@Input()
  get value(): MyTel | null {
    const {value: {area, exchange, subscriber}} = this.parts;
    if (area.length === 3 && exchange.length === 3 && subscriber.length === 4) {
      return new MyTel(area, exchange, subscriber);
    }
    return null;
  }

I think it would be better if a validator was provided. Then in the value getter, simply the validity of the form would have to be checked:

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

I guess Validators.minLength() and Validators.maxLength() would do the job.

Affected documentation page: https://material.angular.io/guide/creating-a-custom-form-field-control

[tobiasschweizer]

@mmalerba If you want me to do this, I am happy to provide a PR.

Actually it is the same files as in #18609.

[mmalerba]

@tobiasschweizer sure, I'd be happy to accept a PR for this. Thanks for taking the time to fix up this example

[tobiasschweizer]

Ok, will do!

Could you tell me how I can test this (actually run the code)?

[mmalerba]

Sure, just run yarn dev-app and go to localhost:4200/examples. There's a lot of examples, so ctrl+f for "form-field-custom-control" and expand that one

[tobiasschweizer]

done in #18844

[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.}