validation-temp2

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

---