How to display the error message of a custom validator?-CodePudding

I have created a custom validator, which looks like this:

export class TestRequestComponent implements OnInit {
  noSymptomSelected: boolean = true;
  symptoms: FormGroup = new FormGroup({
    symptom1: new FormControl(false),
    symptom2: new FormControl(false),
    symptom3: new FormControl(false)
  }, this.validateMe)
  
  form = this.fb.group({
    symptoms: this.symptoms
  })

  validateMe(control: AbstractControl): { [key: string]: any } | null {
    if (Object.values(control.value).some((e) => e === true)) {
      return { error: true };
    }
    else {
      return null;
    }
  }

Now I would like to display its error message. This is what I have tried:

<mat-error *ngIf="form.controls['symptoms']?.errors['validateMe']">ERROR! At least 1 checkbox should be selected.</mat-error>

But I get this error:

TS2533: Object is possibly 'null' or 'undefined'.

CodePudding user response：

<mat-error *ngIf="form.controls['symptoms']?.errors?.['validateMe']">ERROR! At least 1 checkbox should be selected.</mat-error>

You forgot a ?. between errors and ['validateMe']