a11y: use onGetErrorMessage in createDialogModal

[beyackle]

Description

This reworks createDialogModal.tsx a bit by moving the error checking into the Fabric-supported "onGetErrorMessage" and using a boolean in the modal's state to keep track of if we see any errors.

Task Item

Closes #2074
Closes #2060

Screenshots

[github-actions]

Coverage increased (+0.009%) to 39.369% when pulling 287fbcb on beyackle/newDialogErrorMsg into 5e6a9e9 on master.

[a-b-r-o-w-n]

Can we just move the validation to the onChange handler? In fact, there is another PR (#2338) that is the same issue but solved differently. I think this warrants a custom hook, like useForm. I can see an interface like:

interface FormField {
  name: string;
  /** pass formData in order to validate under certain conditions */
  onValidate: (data: any, formData: any) => string | undefined;
}

interface FormState {
  formData: { [key: string]: any };
  formErrors: { [key: string]: any };
  onChange: (field: string) => (value: any) => void;
}

type useForm = (fields: FormField[]) => FormState;

This way we can unify our form behavior.

cc @liweitian

[a-b-r-o-w-n]

This is used before its defined.

[beyackle]

It's defined on line 46 and used on line 88. I don't see the issue.

[a-b-r-o-w-n]

This is actually addressing the same issue as #2338. So we may not need to overcomplicate with a hook, but if we want a consistent behavior for other forms, it seems worth the investment to me.

[beyackle]

Can we just move the validation to the onChange handler?

That was the first thing I tried, and it didn't do the validation when I expected it should. This way, we're using the supported method from Fabric's own API documentation.

[a-b-r-o-w-n]

Closing in favor of #2369