-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathInformation.txt
41 lines (26 loc) · 1.8 KB
/
Information.txt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
1. Create Registration Form (Simple HTML Bootsrtap Form)
2. Import ReactiveFormsModule in app.module.ts file.
3. Create registrationForm=new FormGroup in app.component.ts to define the form control fields.
> Make sure it should import import {ReactiveFormsModule} from '@angular/forms';
4. Associate the reactive from module : registrationForm with html form.
> <form [formGroup]="registrationForm">
> Each Control will use formControlName directive to define the name of control.
> formControlName will have the same name which we define in [registrationForm=new FormGroup] for each property.
5. Nesting FormGroup
> Create grouping of form control (Group : address) [City, State, Postal Code]
> To use the grouping have to define dev tag with <div formGroupName="address">
6. Manage Form Control Value using Set Value and Patch Value
> setValue Method
> It's very strict to maintaining the structure of form group.
> If we set the values then we have to set the value of all the control including address groups control.
> We can not leave other fields without setting the values otherwise it will throw error in console.
> patchValue Method
> Using patch value we can set the values of control as per our choice. We can leave other fields blank and it will be working.
5. It doesn't good to create multiple form instances mannually so we will make use of form builder service.
> import {FormBuilder} from '@angular/forms';
> By that we no need to create the multiple instances of form control.
6 Simple Validation
> Import validators class import {FormBuilder,Validators} from '@angular/forms';
7. Custom Validation
> Example : Username should not contain admin string
> forbiddenNameValidator Method (app/shared/user-name.validator.ts)