1import { Component, OnInit } from '@angular/core';
2import { FormControl, FormBuilder, Validators } from '@angular/forms';
3import { UserService } from './user-service';
4import { User } from './user';
5
6@Component({
7   selector: 'app-reactive',
8   templateUrl: './reactive-form.component.html'
9})
10export class ReactiveFormComponent implements OnInit {
11  unamePattern = "^[a-z0-9_-]{8,15}$";
12  pwdPattern = "^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?!.*\s).{6,12}$";
13  mobnumPattern = "^((\\+91-?)|0)?[0-9]{10}$"; 
14  emailPattern = "^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$";
15  
16  isValidFormSubmitted = null;
17  
18  userForm = this.formBuilder.group({
19    username: ['', [Validators.required, Validators.pattern(this.unamePattern)]],
20    password: ['', [Validators.required, Validators.pattern(this.pwdPattern)]],
21    mobileNumber: ['', Validators.pattern(this.mobnumPattern)],
22    email: ['', Validators.pattern(this.emailPattern)],
23  });
24
25  constructor(private formBuilder:FormBuilder, private userService: UserService) {
26  }
27  ngOnInit() {
28  }
29  onFormSubmit() {
30     this.isValidFormSubmitted = false;
31     if (this.userForm.invalid) {
32        return;
33     }
34     this.isValidFormSubmitted = true;
35     let user: User = this.userForm.value;
36     this.userService.createUser(user);
37     this.userForm.reset();
38  }
39  get username() {
40     return this.userForm.get('username');
41  }
42  get password() {
43     return this.userForm.get('password');
44  }  
45  get mobileNumber() {
46     return this.userForm.get('mobileNumber');
47  }    
48  get email() {
49     return this.userForm.get('email');
50  }      
51} 

1<h3>Reactive Form</h3>
2<p *ngIf="isValidFormSubmitted && userForm.pristine" [ngClass] = "'success'">
3    Form submitted successfully.
4</p>
5<form [formGroup]="userForm" (ngSubmit)="onFormSubmit()">
6 <table>
7  <tr> 
8	<td>User Name: </td>
9	<td> 
10		<input formControlName="username">
11		<div *ngIf="username.errors && isValidFormSubmitted != null && !isValidFormSubmitted" [ngClass] = "'error'"> 
12			<div *ngIf="username.errors.required">
13				User name required.
14			</div>  
15			<div *ngIf="username.errors.pattern">
16				User name not valid.
17			</div> 
18		</div>
19	</td>
20  </tr> 
21  <tr> 
22	<td>Password: </td>
23	<td> 
24		<input type="password" formControlName="password">
25		<div *ngIf="password.errors && isValidFormSubmitted != null && !isValidFormSubmitted" [ngClass] = "'error'"> 
26			<div *ngIf="password.errors.required">
27				Password required.
28			</div>  
29			<div *ngIf="password.errors.pattern">
30				Password not valid.
31			</div> 
32		</div>		   
33	</td>
34  </tr> 	 
35  <tr>
36	<td>Mobile Number: </td>
37	<td> 
38		<input formControlName="mobileNumber">
39		<div *ngIf="mobileNumber.errors && isValidFormSubmitted != null && !isValidFormSubmitted" [ngClass] = "'error'"> 
40			<div *ngIf="mobileNumber.errors.pattern">
41				Mobile number not valid.
42			</div> 
43		</div>		   
44	</td>
45  </tr> 	 	 
46  <tr>
47	<td>Email: </td>
48	<td> 
49		<input formControlName="email">
50		<div *ngIf="email.errors && isValidFormSubmitted != null && !isValidFormSubmitted" [ngClass] = "'error'"> 
51			<div *ngIf="email.errors.pattern">
52				Email not valid.
53			</div> 
54		</div>		   
55	</td>
56  </tr>
57  <tr> 	  
58	<td colspan="2">
59		<button>Submit</button>
60	</td>
61  </tr>	   
62 </table>  
63</form>