feat: add prop onValidateFailed to TextField (#2626)

* feat: add prop onValidateFailed to TextField

* code-review

Author: AmitShwarts

src/incubator/TextField/textField.api.json

@@ -51,6 +51,11 @@
       "type": "(isValid: boolean) => void",
       "description": "Callback for when field validity has changed"
     },
+    {
+      "name": "onValidationFailed",
+      "type": "(failedValidatorIndex: number) => void",
+      "description": "Callback for when field validated and failed"
+    },
     {
       "name": "fieldStyle",
       "type": "ViewStyle | (context: FieldContextType, props) => ViewStyle",

src/incubator/TextField/types.ts

@@ -36,6 +36,10 @@ export interface FieldStateProps extends InputProps {
   validateOnStart?: boolean;
   validateOnChange?: boolean;
   validateOnBlur?: boolean;
+  /**
+   * Callback for when field validated and failed
+  */
+  onValidationFailed?: (failedValidatorIndex: number) => void;
   /**
    * A single or multiple validator. Can be a string (required, email) or custom function.
    */
@@ -203,6 +207,10 @@ export type TextFieldProps = MarginModifiers &
      * Should validate when losing focus of TextField
      */
     validateOnBlur?: boolean;
+    /**
+     * Callback for when field validated and failed
+     */
+    onValidationFailed?: (failedValidatorIndex: number) => void;
     /**
      * Callback for when field validity has changed
      */

src/incubator/TextField/useFieldState.ts

@@ -11,6 +11,7 @@ export default function useFieldState({
   validateOnBlur,
   validateOnChange,
   validateOnStart,
+  onValidationFailed,
   onChangeValidity,
   ...props
 }: FieldStateProps) {
@@ -68,9 +69,13 @@ export default function useFieldState({
     setIsValid(_isValid);
     setFailingValidatorIndex(_failingValidatorIndex);
 
+    if (!_isValid && !_.isUndefined(_failingValidatorIndex)) {
+      onValidationFailed?.(_failingValidatorIndex);
+    }
+
     return _isValid;
   },
-  [value, validate]);
+  [value, validate, onValidationFailed]);
 
   const onFocus = useCallback((...args: any) => {
     setIsFocused(true);