Angular multiple errors in custom reactive form validator

Question

I'm validating a form for a call center where usually fields will be filled in a specific order. I want to raise an error for multiple fields if the user skips ahead. I've found that the below works:

  export const recordValidator: ValidatorFn = (control: FormGroup): ValidationErrors | null => {

    if(!firstField.value && !secondField.Value && !thirdField.value)    
    {
      firstField.setErrors({ "firstFieldError" : true});
      secondField.setErrors({ "secondFieldError" : true});

      return {"firstFieldError" : true, "secondFieldError" : true};

    }
  }

And both firstField and secondField show errors correctly.

Now according to the docs ValidationErrors is just a map of the errors. But it obviously doesn't have any methods, so I thought I'd just cast an existing map to ValidationErrors and return that:

  export const recordValidator: ValidatorFn = (control: FormGroup): ValidationErrors | null => {

    if(!firstField.value && !secondField.Value && !thirdField.value)    
    {
      firstField.setErrors({ "firstFieldError" : true});
      secondField.setErrors({ "secondFieldError" : true});

      let errorMap = new Map();

      errorMap.set("firstFieldError",true);
      errorMap.set("secondFieldError",true);

      let errorValidators:ValidationErrors = errorMap;

      return errorValidators;

    }
  }

but it doesn't raise any errors.

My template looks like this:

<mat-form-field>
  <input formControlName="firstField" type="datetime-local" placeholder="First Field" [errorStateMatcher]="errorMatcher" matInput>                        
      <mat-error *ngIf="Form.errors?.firstFieldError">
      First field error!
      </mat-error>
</mat-form-field>

Can anyone help me to see why the first one works and the second doesn't

Answer 1

Jim, a custom Validator don't work as you say. You need return an object (or null). So your valitadion must like some like

export const recordValidator: ValidatorFn = (control: FormGroup): ValidationErrors | null => {
    let invalid=false
    const error={}
    if (!control.value.firstField && control.value.secondField)
    {
        error.firstFieldError=true;
        invalid=true;
    }
    if (!control.value.secondField && control.value.thirdField)
    {
        error.secondFieldError=true;
        invalid=true;
    }
    return invalid?error:null;
  }

See how we get value from "control" -it's the formGroup- and how we create an object with one or two properties -you can see in your .html if you write to check-

{{form.errors|json}}

NOTE: Really I don't understand your validator and imagine one taking acount the description in your question