Validation Array / Better DX

[fourgates]

I noticed the default way to perform validation is by using a FieldValidateFn.

  firstNameValidator: FieldValidateFn<any, any, any, any, string> = ({
    value,
  }) => {
    if (!value) {
      return 'A first name is required';
    }
    if (value.length < 3) {
      return 'First name must be at least 3 characters';
    }
    return undefined;
  };

I really love the zod adapter though. it allows for really well written validation

         [validators]="{
            onChange: z.string().min(3, 'First name must be at least 3 characters')
          }"

in Angular there are ways to compose validations when creating a form.

  private initForm(): any {
    return this.fb.group<Person>({
      // personal info
      firstName: [null, Validators.compose([Validators.required, Validators.maxLength(100)])]
....
}

I'm not sure how this would work, but it would be nice to compose validations for a form without having to write a function for each field and/or validation. I feel like that could end up requiring a lot of grunt work.

         [validators]="{
            onChange: [z.string().min(3, 'First name must be at least 3 characters'), z.string().max(100, 'First name must less than 100 characters')]
          }"

[crutchcorn]

Zod is actually able to chain errors together! 😄

z.string().min(3, 'First name must be at least 3 characters').max(100, 'First name must less than 100 characters')

This should work!