Add isOneOf validation.

demo/pages/index.tsx

@@ -11,6 +11,7 @@ interface UserFormFields {
   firstName: string;
   lastName: string;
   email: string;
+  tShirtSize: string;
 }
 
 function getErrorText(formField: FormField, formFields: FormFields, submitting?: boolean) {
@@ -19,6 +20,8 @@ function getErrorText(formField: FormField, formFields: FormFields, submitting?:
       return 'Required';
     case 'isEmail':
       return 'Invalid email';
+    case 'isOneOf':
+      return 'Must be small, medium, or large';
   }
 }
 
@@ -42,14 +45,24 @@ const formFieldConfigs: FormFieldConfig[] = [
     isEmail: true,
     getHelperText: getErrorText,
   },
+  {
+    name: 'tShirtSize',
+    label: 'T-shirt size',
+    required: true,
+    isOneOf: ['small', 'medium', 'large'],
+    getHelperText: getErrorText,
+  },
 ];
 
 export class Home extends React.Component {
   render() {
     return (
       <Page>
         <ClassyForm formFieldConfigs={formFieldConfigs}>
-          {({ formFields: { email, firstName, lastName }, onSubmit }: FormsContextContext<UserFormFields>) => {
+          {({
+            formFields: { email, firstName, lastName, tshirtSize },
+            onSubmit,
+          }: FormsContextContext<UserFormFields>) => {
             return (
               <React.Fragment>
                 <FormInput key={firstName.name} formField={firstName} />
@@ -58,6 +71,13 @@ export class Home extends React.Component {
 
                 <FormInput key={email.name} formField={email} />
 
+                <FormInput
+                  key={tshirtSize.name}
+                  formField={tshirtSize}
+                  autoComplete="off"
+                  placeholder="small, medium, or large"
+                />
+
                 <div className="form-actions">
                   <Button variant="contained" color="primary" type="submit">
                     Register

src/interfaces.ts

@@ -21,6 +21,7 @@ export type ErrorType =
   | 'matchRegexp'
   | 'maxLength'
   | 'minLength'
+  | 'isOneOf'
   | 'required'
   | 'isValid'
   | 'isInitError';
@@ -83,6 +84,7 @@ export interface FormFieldConfig {
   matchRegexp?: RegExp;
   maxLength?: number;
   minLength?: number;
+  isOneOf?: Value[];
 
   isValid?(formField: FormField, formFields: FormFields, submitting?: boolean): boolean;
   getHelperText?(formField: FormField, formFields: FormFields, submitting?: boolean): string | undefined;

src/validations.ts

@@ -95,4 +95,7 @@ export const validations = {
   minLength(formField: FormField, formFields: FormFields, submitting: boolean, length: number) {
     return !isExisty(formField.value) || isEmpty(formField.value) || formField.value.length >= length;
   },
+  isOneOf(formField: FormField, formFields: FormFields, submitting: boolean, allowedValues: Value[]) {
+    return !isExisty(formField.value) || isEmpty(formField.value) || allowedValues.includes(formField.value);
+  },
 };