validation-temp2 v0.1.4

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

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
                })
              }
            }}
        />