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

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

[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

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