```js const initialValue = null; const control = new FormControl(initialValue); ``` #### usage in html ```html <input type="text" v-model="control.value" /> ```
npm install reactive-vue-formjs
const initialValue = null;
const control = new FormControl(initialValue);
`
#### usage in html
`html
`
FormGroup
`js
const formGroup = new FormGroup({
name: new FormControl(),
age: new FormControl(),
tosos: new FormArray([]),
});
`
#### usage in html
`html
{{ formGroup.name.value }}
{{ formGroup.age.value }}
`
$3
`js
// 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
`js
const formArray = new FormArray([
new FormControl(),
new FormArray([
new FormControl(),
]),
new FormArray([
new FormGroup({
control: new FormFormArray([]),
})
]),
]);
`
#### usage in html
`html
`
Validation
$3
1. synchronous functions
2. asynchronous functions
synchronous functions
#### FormControl
`js
const initialValue = null;
// generic type for control
function validator(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
`js
function checkTodoStatus(control) {
const todos = control.get('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
`js
function controlsLength(control) {
if (control.controls.length < 2)) {
return { 'controlsLength': 'invalid length' }
}
return null;
}
const formGroup = new FormArray({
new FormControl(),
new FormControl(),
}, [controlsLength]);
`
$3
Everything is exactly the same as with synchronous validators, only the validator must return a promise
`js
/*
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(control, abortController): Promise {
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