Default Action Result

Represent the value that is returned in actions like (validation ....)

  export interface IFieldsRefs {
      field : string,
      ref : RefObject<any>
    } 


  export interface IPromiseValidationData<T> {
    error : boolean,  /** true,false - form currently valid or not( has validation error or not)*/
    data : T,  /** represent validated object values */
    validations ?: IValidationModel<T> /** validation state for object */
    refs ? : IFieldsRefs[]   /** ref of fields for control fields like focus...*/
  }

example:

 const submitHandler = async () => {
   const {error,data,validations,refs} = await validation.validate()
 }

Example: Client- Submit

Reset Validation

Reset validation, clear all errors and set all fields to not dirty.
declaration

   resetValidations : (clearData ?: boolean) => void

@param clearData
true : all value in form will be reset to defaultValue or undefined -> if there is no defaultValue for the field

Remove Data Array

Use function to remove from list that has to be validated

 const validation = useValidation(...)
...
  const someHandler =  () => { 
      const { removeArrayData } = useValidation
      removeArrayData(fieldParentName as string, index as number)
  }  

Example: Client- Address

Add Data Array

Add object in one array of model. Use this if validation has more then one of same list object to validate
@field - string path of array variable like ( address, person.address...)
@data - empty object of object with data that will be default one.

   addArrayData : (field : string, data : any) => Promise<IPromiseValidationData<T>>

   const data = await validation.addArrayData('person.address', {
      zip: "10000"
     })
 

Example: Client- Address

Set Field Value

Use function to remove from list that has to be validated

 const validation = useValidation(...)
...
  const someHandler =  () => { 
      const { removeArrayData } = useValidation
      removeArrayData(fieldParentName as string, index as number)
  }  

Example: Client- Address

|Field|Description| |-----| -----| | getFieldValue | function that returns current value for the field from state (or undefined) getField('email') | | setFieldValue | set the value to dedicated field in state setField('company.address.zip','12345') | | setFieldError | set the error for field - this error will be valid error for that field ( error is set and validation will not pass until field value is changed) setField('person.firstName','User already exists') | | | setErrorGlobal| set the error for complete model but not for particular field. Used when you get error from backend that can't be dedicated to any field, param can be string to be shown as error or just true like error exists| | errorGlobal | Value of error global that is set external, can be boolean,undefined,string , undefined or false - error not exists| | state | represent object of form | | onBlurField | function that should be called after particular field got onBlur event, make field dirty. | | errorModel| boolean value that shows is there one error on model | | resetValidations | Reset Validation| | validate | Validate| | removeArrayData | Remove Array Data | | addArrayData | Add Array Data |

Set fields

Every input field can become a valid validation input field. Using HOC withValidation to encapsulate your component, that component becomes a component that can proceed validation.

({error,helperText,label,inputRef,value,...rest}) => {
 return (
    <div className= "form-group">
      <label className={error ? 'custom-label text-danger' : 'custom-label'}>{label}</label>
      <input
             className={`form-control ${error ? 'is-invalid' : ''}`}
             type="text"
             value={value}
             ref = {inputRef}
             {
                 ...rest
             }
      />
      { error ?  <small className="invalid-feedback custom-helper">{error}</small>  :
        (helperText ? <small className="custom-helper text-muted">{helperText}</small> : <small>&nbsp;</small>)
      }
    </div>

helper, label is user defined while inputRef ( React- ref object), value and error is provided by HOC ( withValidation) One have to implement to error ( string or true if validation error exists) and value represents current value for input

validation : {
    useValidation : IUseValidation<T> /** instance of validation hook */
    model : string    /** name of field in model (firstName, address.zip)
    defaultValue ?: string /** value that will be used for reset the form with data reseting */
    rule ? : IValidationFieldRules  /** object with validation rules */
    format ?: IFormatRuleProps /** format for field */
  }

import {
  minLength,
  required,
  useValidation
}                                  from 'easy-format-validation'
     ...


        const validation = useValidation()
          ...

        <MaterialTextFieldValidation
            label={'Last name'}
            helperText={'enter last name'}
            validation= {{
              useValidation: validation,
              model: 'lastName',
              rule: {
                required,
                minLength: minLength({
                  min: 2
                })
              }
            }}
        />