|
1 | | -# Flipflop Quiz game |
| 1 | +# Run Application |
| 2 | +``` |
| 3 | +ng serve |
| 4 | +localhost:4200/ |
| 5 | +``` |
| 6 | + |
| 7 | + |
| 8 | + |
| 9 | +# Reactive form controls (Taken help from these tutorials) |
2 | 10 |
|
3 | | -create an Interface class for Quiz data by running following command defining the type of values for quiz. |
| 11 | +https://stackblitz.com/edit/dynamic-form-generate-from-json-angular-2-reactive-form?file=src%2Fapp%2Fapp.component.ts |
| 12 | +https://medium.com/@fabiokounang/angular-6-dynamic-form-with-reactive-form-controls-43a10176a9f1 |
| 13 | +https://dzone.com/articles/how-to-create-custom-validators-in-angular |
| 14 | +https://jasonwatmore.com/post/2018/05/10/angular-6-reactive-forms-validation-example |
| 15 | +https://stackblitz.com/edit/angular-6-reactive-form-validation?file=app%2Fapp.component.html |
| 16 | + |
| 17 | +# Custom validator in Angular |
| 18 | + |
| 19 | +Angular provides us many useful validators, including required, minLength, maxLength, and pattern. These validators are part of the Validators class, which comes with the @angular/forms package. |
| 20 | + |
| 21 | +Let's assume you want to add a required validation to the email control and a maxLength validation to the password control. Here's how you do that: |
| 22 | +``` |
| 23 | +this.loginForm = new FormGroup({ |
| 24 | + email: new FormControl(null, [Validators.required]), |
| 25 | + password: new FormControl(null, [Validators.required, Validators.maxLength(8)]), |
| 26 | + age: new FormControl(null) |
| 27 | + }); |
| 28 | +``` |
| 29 | +To work with validators, make sure to import them into the component class: |
4 | 30 |
|
5 | 31 | ``` |
6 | | -ng generate class models/Quiz |
| 32 | +import { FormGroup, FormControl, Validators } from '@angular/forms'; |
7 | 33 | ``` |
8 | 34 |
|
9 | | -# Run Application |
| 35 | +On the template, you can use validators to show or hide an error message. Essentially, you are reading formControl using the get() method and checking whether it has an error or not using the hasError() method. You are also checking whether formControl is touched or not using the touched property. |
| 36 | + |
| 37 | +### Validate form on submission in reactive-form |
| 38 | + |
| 39 | +You can actually achieve this already with the submitted flag on the top level form directive. create form directive using #formDir="ngForm" and then check |
| 40 | +form is submitted or not using "formDir.submitted" checking. "formDir.submitted" will return you boolean value true or false. |
| 41 | + |
| 42 | + |
| 43 | +#### Static reactive form validation (Email) |
| 44 | + |
| 45 | +``` |
| 46 | +<div class="col-12 form-group"> |
| 47 | + <label>email</label> |
| 48 | + <input type="email" formControlName="email" class="form-control" [ngClass]="{'is-invalid' : registerForm.get(form.key).errors && formDir.submitted }"> |
| 49 | + <div *ngIf="!registerForm.get(form.key).valid && registerForm.get(form.key).errors && formDir.submitted"> |
| 50 | + <span class="error" *ngIf="registerForm.get(form.key).errors.hasOwnProperty('required')">email is required</span> |
| 51 | + <span class="error" *ngIf="registerForm.get(form.key).errors.hasOwnProperty('email')">email must be valid</span> |
| 52 | + </div> |
| 53 | +</div> |
| 54 | +``` |
| 55 | + |
| 56 | +#### Dynamic reactive form validation (Email) |
| 57 | + |
| 58 | +``` |
| 59 | +<div class="col-12 form-group"> |
| 60 | + <label>{{form.key}}</label> |
| 61 | + <input [type]="form.input" [formControlName]="form.key" class="form-control" [ngClass]="{'is-invalid' : registerForm.get(form.key).errors && formDir.submitted }"> |
| 62 | + <div *ngIf="!registerForm.get(form.key).valid && registerForm.get(form.key).errors && formDir.submitted"> |
| 63 | + <div *ngFor="let err of form.valids; let k = index"> |
| 64 | + <span class="error" *ngIf="registerForm.get(form.key).errors.hasOwnProperty(err.valid)">{{err.error}}</span> |
| 65 | + </div> |
| 66 | + </div> |
| 67 | +</div> |
| 68 | +``` |
| 69 | + |
| 70 | +OR |
| 71 | + |
| 72 | +``` |
| 73 | +<div class="col-12 form-group"> |
| 74 | + <label>{{form.key}}</label> |
| 75 | + <input [type]="form.input" [formControlName]="form.key" class="form-control" [ngClass]="{'is-invalid' : registerForm.get(form.key).errors && formDir.submitted }"> |
| 76 | + <div *ngIf="!registerForm.get(form.key).valid && registerForm.get(form.key).errors && formDir.submitted"> |
| 77 | + <div *ngFor="let err of form.valids; let k = index"> |
| 78 | + <span class="error" *ngIf="registerForm.get(form.key).hasError(err.valid)">{{err.error}}</span> |
| 79 | + </div> |
| 80 | + </div> |
| 81 | +</div> |
10 | 82 | ``` |
11 | | -ng serve |
12 | | -localhost:4200/ |
13 | | -``` |
|
0 commit comments