\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n```\r\n\r\n### add child\r\n\r\n```js\r\n// add new todo with status\r\nformGroup.todos.addControl(new FormGroup({\r\n status: new FormControl(false),\r\n name: new FormControl(''),\r\n}));\r\n\r\n// or simple todo with only name\r\nformGroup.todos.addControl(new FormControl('todo name')),\r\n\r\n// or both\r\nformGroup.todos.addControls([\r\n new FormGroup({\r\n status: new FormControl(false),\r\n name: new FormControl(''),\r\n }),\r\n new FormControl('todo name')\r\n]);\r\n```\r\n\r\n## FormArray\r\n```js\r\nconst formArray = new FormArray([\r\n new FormControl(),\r\n new FormArray([\r\n new FormControl(),\r\n ]),\r\n new FormArray([\r\n new FormGroup({\r\n control: new FormFormArray([]),\r\n }) \r\n ]),\r\n]);\r\n```\r\n\r\n#### usage in html\r\n```html\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n```\r\n\r\n\r\n# Validation\r\n\r\n### There are two ways to validate data\r\n1. synchronous functions\r\n2. asynchronous functions\r\n\r\n## synchronous functions\r\n\r\n#### FormControl\r\n\r\n```js\r\nconst initialValue = null;\r\n// generic type for control\r\nfunction validator(control) {\r\n if (control.value != 1) {\r\n // if not valid\r\n return { 'one': 'value must be 1' }\r\n }\r\n // if valid\r\n return null\r\n}\r\nconst control = new FormControl(initialValue, [validator]);\r\n```\r\n\r\n\r\n#### FormGroup\r\n\r\n```js\r\nfunction checkTodoStatus(control) {\r\n const todos = control.get('todos');\r\n if (todos.controls.every(control => control instanceof FormGroup)) {\r\n return todos.value.every(value => value.status === true) ? null : { 'errorStatus': 'all must be completed' }\r\n }\r\n\r\n return null;\r\n}\r\n\r\nconst formGroup = new FormGroup({\r\n name: new FormControl(),\r\n age: new FormControl(),\r\n tosos: new FormArray([\r\n new FormGroup({ status: new FormControl(false), name: new FormControl() }),\r\n new FormGroup({ status: new FormControl(false), name: new FormControl() }),\r\n new FormGroup({ status: new FormControl(false), name: new FormControl() })\r\n ]),\r\n}, [checkTodoStatus]);\r\n```\r\n\r\n#### FormArray\r\n\r\n```js\r\nfunction controlsLength(control) {\r\n if (control.controls.length < 2)) {\r\n return { 'controlsLength': 'invalid length' }\r\n }\r\n\r\n return null;\r\n}\r\n\r\nconst formGroup = new FormArray({\r\n new FormControl(),\r\n new FormControl(),\r\n}, [controlsLength]);\r\n```\r\n\r\n\r\n\r\n### asynchronous function\r\n\r\n## Everything is exactly the same as with synchronous validators, only the validator must return a promise\r\n\r\n```js\r\n/*\r\n abortController - https://developer.mozilla.org/en/docs/Web/API/AbortController.\r\n It can be used to cancel requests.\r\n If the form is updated, then all active asynchronous validators will be canceled and the method will be called\r\n abortController.abort(); \r\n dont call abortController.abort() inside validator just return error object or null\r\n \r\n \r\n validator must return a promise or be an asynchronous function\r\n*/\r\n\r\nfunction asyncValidator(control, abortController): Promise {\r\n return fetch(url, {\r\n signal: abortController.signal\r\n }).then((response) => {\r\n // if not valid\r\n if (response.error) {\r\n return {\r\n return { 'httpError': response.errorMessage }\r\n }\r\n }\r\n \r\n // if valid\r\n return null;\r\n });\r\n\r\n}\r\nconst control = new FormControl(initialValue, [/*sync validators*/], [asyncValidator]);\r\n```\r\n\r\n## property\r\n# pending\r\nAllows you to control the processes of synchronous verification\r\nIf it returns true, then 1 or more asynchronous validators in progress\r\n","readmeFilename":"README.md"}