Skip to content

Commit 3f9fbff

Browse files
committed
Add validator questions
1 parent ae2984d commit 3f9fbff

File tree

1 file changed

+38
-7
lines changed

1 file changed

+38
-7
lines changed

README.md

+38-7
Original file line numberDiff line numberDiff line change
@@ -271,9 +271,9 @@
271271
|263| [How do you verify the model changes in forms?](#how-do-you-verify-the-model-changes-in-forms)|
272272
|264| [What are the state CSS classes provided by ngModel?](#what-are-the-state-css-classes-provided-by-ngmodel)|
273273
|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)|
277277
|269| [](#)|
278278
|270| [](#)|
279279
|271| [](#)|
@@ -4271,15 +4271,46 @@
42714271
42724272
**[⬆ Back to Top](#table-of-contents)**
42734273
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.
42754278
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+
```
42774287
4278-
267. ### ?
4288+
**[⬆ Back to Top](#table-of-contents)**
42794289
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.
42804301
**[⬆ Back to Top](#table-of-contents)**
42814302
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+
```
42834314
42844315
**[⬆ Back to Top](#table-of-contents)**
42854316

0 commit comments

Comments
 (0)