angular - Form control not working when set custom validation on the form group

Question

This is my group -

this.fb.group( {email: new FormControl('')},
      {
        validators: [ formGroup =>  {email:"some error"}]
      }
    );

this is my form:

<form [formGroup]="formGroup">
  <app-input [control]="loginFormGroup.controls.email"></app-input>
</form>

app input component:

  <input
    matInput
    [formControl]="control"
    [errorStateMatcher]="matcher"
  />

export class MyErrorStateMatcher implements ErrorStateMatcher {
  error = '';
  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
    const isSubmitted = form && form.submitted;
    if (control?.errors) {
      this.error = control.errors[0];
    }
    return !!(control && control.invalid && (control.dirty || control.touched || isSubmitted));
  }
}

isErrorState always return null, because the control form is always valid. the errors exists only on the form group. what i missing?

Answer 1

You have to set validator in FormControl.

this.fb.group({email: new FormControl('', {
  validators: [
    control => {
      return {email: 'some error'};
    }]
  })
});