Simplest way to validate yours vue forms

DOCS

https://todos-form-production.up.railway.app/

FormControl

create control

const initialValue = null;
const control = new FormControl(initialValue);

usage in html

<input type="text" v-model="control.value" />

FormGroup

const formGroup = new FormGroup({
  name: new FormControl(),
  age: new FormControl(),
  tosos: new FormArray([]),
});

usage in html

  <div class="d-flex">
    <div>{{ formGroup.name.value }}<div>
    <div>{{ formGroup.age.value }}<div>
  </div>
  <template v-for="control in formGroup.todos.controls">
    <template v-if="control instanceof FormControl">
      <textarea v-model="control.value"></textarea>
    </template>
    <template v-if="control instanceof FormGroup">
      <input type="checkbox" v-model="control.status.value" />
      <textarea v-model="control.name.value"></textarea>
    </template>
  </template>

add child

// add new todo with status
formGroup.todos.addControl(new FormGroup({
  status: new FormControl(false),
  name: new FormControl(''),
}));

// or simple todo with only name
formGroup.todos.addControl(new FormControl('todo name')),

// or both
formGroup.todos.addControls([
  new FormGroup({
    status: new FormControl(false),
    name: new FormControl(''),
  }),
  new FormControl('todo name')
]);

FormArray

const formArray = new FormArray([
  new FormControl(),
  new FormArray([
    new FormControl(),
  ]),
  new FormArray([
    new FormGroup({
      control: new FormFormArray([]),
    }) 
  ]),
]);

usage in html

  <template v-for="control in formArray.controls">
    <template v-if="control instanceof FormControl">
      <textarea v-model="control.value"></textarea>
    </template>
    <template v-if="control instanceof FormArray">
      <render-array :array="control.controls" />
    </template>
  </template>

Validation

There are two ways to validate data

1. synchronous functions
2. asynchronous functions

synchronous functions

FormControl

const initialValue = null;
// generic type for control
function validator<FormControl>(control) {
  if (control.value != 1) {
    // if not valid
    return { 'one': 'value must be 1' }
  }
  // if valid
  return null
}
const control = new FormControl(initialValue, [validator]);

FormGroup

function checkTodoStatus<FormGroup>(control) {
  const todos = control.get<FormArray>('todos');
  if (todos.controls.every(control => control instanceof FormGroup)) {
    return todos.value.every(value => value.status === true) ? null : { 'errorStatus': 'all must be completed' }
  }

  return null;
}

const formGroup = new FormGroup({
  name: new FormControl(),
  age: new FormControl(),
  tosos: new FormArray([
    new FormGroup({ status: new FormControl(false), name: new FormControl() }),
    new FormGroup({ status: new FormControl(false), name: new FormControl() }),
    new FormGroup({ status: new FormControl(false), name: new FormControl() })
  ]),
}, [checkTodoStatus]);

FormArray

function controlsLength<FormArray>(control) {
  if (control.controls.length < 2)) {
    return { 'controlsLength': 'invalid length' }
  }

  return null;
}

const formGroup = new FormArray({
  new FormControl(),
  new FormControl(),
}, [controlsLength]);

asynchronous function

Everything is exactly the same as with synchronous validators, only the validator must return a promise

/*
  abortController - https://developer.mozilla.org/en/docs/Web/API/AbortController.
  It can be used to cancel requests.
  If the form is updated, then all active asynchronous validators will be canceled and the method will be called
  abortController.abort(); 
  dont call abortController.abort() inside validator just return error object or null
  
  
  validator must return a promise or be an asynchronous function
*/

function asyncValidator<FormControl>(control, abortController): Promise<ValidationErrors> {
  return fetch(url, {
    signal: abortController.signal
  }).then((response) => {
    // if not valid
    if (response.error) {
      return {
        return { 'httpError': response.errorMessage }
      }
    }
    
    // if valid
    return null;
  });

}
const control = new FormControl(initialValue, [/*sync validators*/], [asyncValidator]);

property

pending

Allows you to control the processes of synchronous verification If it returns true, then 1 or more asynchronous validators in progress