|
271 | 271 | |263| [How do you verify the model changes in forms?](#how-do-you-verify-the-model-changes-in-forms)|
|
272 | 272 | |264| [What are the state CSS classes provided by ngModel?](#what-are-the-state-css-classes-provided-by-ngmodel)|
|
273 | 273 | |265| [How do you reset the form?](#how-do-you-reset-the-form)|
|
274 |
| -|266| [](#)| |
275 |
| -|267| [](#)| |
276 |
| -|268| [](#)| |
| 274 | +|266| [What are the types of validator functions?](#what-are-the-types-of-validator-functions)| |
| 275 | +|267| [Can you give an example of built-in validators?](#can-you-give-an-example-of-built-in-validators)| |
| 276 | +|268| [How do you optimize the performance of async validators?](#how-do-you-optimize-the-performance-of-async-validators)| |
277 | 277 | |269| [](#)|
|
278 | 278 | |270| [](#)|
|
279 | 279 | |271| [](#)|
|
|
4271 | 4271 |
|
4272 | 4272 | **[⬆ Back to Top](#table-of-contents)**
|
4273 | 4273 |
|
4274 |
| -266. ### ? |
| 4274 | +266. ### What are the types of validator functions? |
| 4275 | + In reactive forms, the validators can be either synchronous or asynchronous functions, |
| 4276 | + 1. **Sync validators:** These are the synchronous functions which take a control instance and immediately return either a set of validation errors or null. Also, these functions passed as second argument while instantiating the form control. The main use cases are simple checks like whether a field is empty, whether it exceeds a maximum length etc. |
| 4277 | + 2. **Async validators:** These are the asynchronous functions which take a control instance and return a Promise or Observable that later emits a set of validation errors or null. Also, these functions passed as second argument while instantiating the form control. The main use cases are complex validations like hitting a server to check the availability of a username or email. |
4275 | 4278 |
|
4276 |
| - **[⬆ Back to Top](#table-of-contents)** |
| 4279 | + The representation of these validators looks like below |
| 4280 | + ```js |
| 4281 | + this.myForm = formBuilder.group({ |
| 4282 | + firstName: ['value'], |
| 4283 | + lastName: ['value', *Some Sync validation function*], |
| 4284 | + email: ['value', *Some validation function*, *Some asynchronous validation function*] |
| 4285 | + }); |
| 4286 | + ``` |
4277 | 4287 |
|
4278 |
| -267. ### ? |
| 4288 | + **[⬆ Back to Top](#table-of-contents)** |
4279 | 4289 |
|
| 4290 | +267. ### Can you give an example of built-in validators? |
| 4291 | + In reactive forms, you can use built-in validator like `required` and `minlength` on your input form controls. For example, the registration form can have these validators on name input field |
| 4292 | + ```js |
| 4293 | + this.registrationForm = new FormGroup({ |
| 4294 | + 'name': new FormControl(this.hero.name, [ |
| 4295 | + Validators.required, |
| 4296 | + Validators.minLength(4), |
| 4297 | + ]) |
| 4298 | + }); |
| 4299 | + ``` |
| 4300 | + Whereas in template-driven forms, both `required` and `minlength` validators available as attributes. |
4280 | 4301 | **[⬆ Back to Top](#table-of-contents)**
|
4281 | 4302 |
|
4282 |
| -268. ### ? |
| 4303 | +268. ### How do you optimize the performance of async validators? |
| 4304 | + Since all validators run after every form value change, it creates a major impact on performance with async validators by hitting the external API on each keystroke. This situation can be avoided by delaying the form validity by changing the updateOn property from change (default) to submit or blur. |
| 4305 | + The usage would be different based on form types, |
| 4306 | + 1. **Template-driven forms:** Set the property on `ngModelOptions` directive |
| 4307 | + ```html |
| 4308 | + <input [(ngModel)]="name" [ngModelOptions]="{updateOn: 'blur'}"> |
| 4309 | + ``` |
| 4310 | + 2. **Reactive-forms:** Set the property on FormControl instance |
| 4311 | + ```js |
| 4312 | + name = new FormControl('', {updateOn: 'blur'}); |
| 4313 | + ``` |
4283 | 4314 |
|
4284 | 4315 | **[⬆ Back to Top](#table-of-contents)**
|
4285 | 4316 |
|
|
0 commit comments