2

I implemented custom control based on official guides using ControlValueAccessor:

The issue that validation error is not showing until we touch our custom field. In my case I have an issue with Stepper, but it also not working when I do this.form.markAllAsTouched()

Error example

I provide example below based on official custom Phone field. Click "Next" with empty fields.

Example on stackblitz

Arti
  • 7,356
  • 12
  • 57
  • 122

2 Answers2

3

See the function errroState. You can add the condition ngControl.invalid and mark as touched is the ngControl is touched using

  get errorState(): boolean {
    const touched=!!this.ngControl?.touched;
    if (touched!=this.touched)
    {
      this.touched=touched;
      this.stateChanges.next();
    }
    return (this.parts.invalid || !!this.ngControl?.invalid) && this.touched;
  }

Then if you mark as touched the FormControl, you see the error

<button type="button" mat-button matStepperNext 
   (click)="form.markAllAsTouched()" >Next</button>

stackblitz

Eliseo
  • 50,109
  • 4
  • 29
  • 67
1

You can just change the MyTelInput property touched from false to true

export class MyTelInput
  implements ControlValueAccessor, MatFormFieldControl<MyTel>, OnDestroy
{
.
.
.
touched = true; //change from false to true
.
.
}

Try look also in the angular material docs for more info

https://material.angular.io/guide/creating-a-custom-form-field-control#errorstate

Solution image

Imri Harlev
  • 86
  • 3