Consistent updating of validation state in a custom reactive form control?

Issue

I'm trying to create a material username reactive form control using the approach outlined in this tutorial.

The end result should work in a form like this ( The fs-username-form is the custom reactive form component ):

<mat-card class="UsernameFormTestCard">
  <form class="UsernameForm" [formGroup]="form" (ngSubmit)="submit()">
    <mat-form-field>
      <input
        matInput
        placeholder="First name"
        type="text"
        formControlName="firstName"
      />
      <mat-hint *ngIf="!username">Example Monica</mat-hint>
      <mat-error>Please enter your first name</mat-error>
    </mat-form-field>

    <fs-username-form formControlName="username"></fs-username-form>

    <button mat-button type="submit" [disabled]="!form.valid">Submit</button>
  </form>
</mat-card>

If the form is valid then the Submit button enables.

And it works ... sort of ... It enables reactively ... but not consistently. The minimum number of characters is set to 4. And the submit button enables when the length is 4. However if we start removing characters from the username the submit button only disables after the length of the username is 2.

This is the Stackblitz demo showing this.

The username-form.component.ts is implemented like this:

import { Component } from '@angular/core';
import {
  AbstractControl,
  ControlValueAccessor,
  FormControl,
  FormGroup,
  NG_VALIDATORS,
  NG_VALUE_ACCESSOR,
  ValidationErrors,
  Validator,
  Validators,
} from '@angular/forms';

@Component({
  selector: 'fs-username-form',
  templateUrl: './username-form.component.html',
  styleUrls: ['./username-form.component.css'],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      multi: true,
      useExisting: UsernameFormComponent,
    },
    {
      provide: NG_VALIDATORS,
      multi: true,
      useExisting: UsernameFormComponent,
    },
  ],
})
export class UsernameFormComponent implements ControlValueAccessor, Validator {
  //=============================================
  // ControlValueAccessor API Methods
  //=============================================
  disabled: boolean = false;
  // Dummy initialization.
  //The implementation is passed in
  // with registerOnChange.
  onChange = (username: string) => {};
  onTouched = () => {};
  touched = false;
  usernameValue = '';

  writeValue(username: any): void {
    this.usernameValue = username;
  }

  //=============================================
  // Registration API Methods
  //=============================================

  registerOnChange(onChange: any): void {
    this.onChange = onChange;
  }

  registerOnTouched(onTouched: any): void {
    this.onTouched = onTouched;
  }

  markAsTouched() {
    if (!this.touched) {
      this.onTouched();
      this.touched = true;
    }
  }

  setDisabledState(disabled: boolean) {
    this.disabled = disabled;
    if (disabled) {
      this.usernameControl?.disable();
    } else {
      this.usernameControl?.enable();
    }
  }

  //=============================================
  // Validator API Methods
  //=============================================
  validate(control: AbstractControl): ValidationErrors | null {
    console.log('VALIDATE IS GETTING CALLED');
    console.log('Is the form valid: ', this.usernameForm.valid);

    if (this.usernameForm.valid) {
      return null;
    }

    let errors: any = {};

    errors = this.addControlErrors(errors, 'username');

    return errors;
  }

  addControlErrors(allErrors: any, controlName: string) {
    const errors = { ...allErrors };
    const controlErrors = this.usernameForm.controls[controlName].errors;

    if (controlErrors) {
      errors[controlName] = controlErrors;
    }
    return errors;
  }

 
  /**
   * Registers a call to onChange to inform
   * parent forms of valueChanges events.
   */
  constructor() {
    this.usernameControl?.valueChanges.subscribe((u) => {
      this.onChange(u);
    });
  }

  public usernameForm: FormGroup = new FormGroup({
    username: new FormControl('', [
      Validators.required,
      Validators.minLength(4),
    ]),
  });

  get username() {
    return this.usernameForm.get('username')?.value;
  }

  get usernameControl() {
    return this.usernameForm.get('username');
  }
}

The username-form.component.html template looks like this:

<form class="UsernameForm" [formGroup]="usernameForm">
  <mat-form-field>
    <input
      matInput
      placeholder="username"
      type="text"
      formControlName="username"
    />
    <mat-hint *ngIf="!username">Example Monica</mat-hint>
    <mat-error>Please enter your username</mat-error>
  </mat-form-field>
</form>

As can be seen it implements the ControlValueAccessor and Validator interfaces.

Call on onChange are made when the user types in the username field and IIUC this in turn should cause the parent form to call validate on the username control.

Any ideas on why the submit button in the demo form does not update consistently or why the username-form component does not

Solution

Got it working. Instead of checking whether the form containing the control is valid in the validate method, I switched it to check whether the control itself is valid like this:

  //=============================================
  // Validator API Methods
  //=============================================
  validate(control: AbstractControl): ValidationErrors | null {

    if (this.usernameControl.valid) {
      return null;
    }

    let errors: any = {};

    errors = this.addControlErrors(errors, 'username');

    return errors;
  }

And now it works. This is a new working demo.

Answered By - Ole