· 7 years ago · Nov 12, 2018, 06:36 AM
1
2<div class="container ">
3 <h1 >Register</h1>
4 <form #form="ngForm" [formGroup]="userForm" (submit)="submitForm(form)" novalidate >
5
6
7 <div class="form-group" [class.has-error]="firstname.invalid && firstname.touched">
8 <label for="FirstName">FirstName</label>
9 <input formControlName="firstname" placeholder="Enter FirstName"required type="text" name="FirstName" class="form-control " maxlength="10" [(ngModel)]="model.FirstName"/>
10 <div *ngIf="firstname.invalid && firstname.touched" class="alert alert-danger">
11 FirstName is required.
12 </div>
13 </div>
14 <div class="form-group" [class.has-error]="lastname.invalid && lastname.touched">
15 <label for="LastName">LastName</label>
16 <input formControlName="lastname" placeholder="Enter LastName" required type="text" name ="LastName" class="form-control" [(ngModel)]="model.LastName" />
17 <div *ngIf="lastname.invalid && lastname.touched" class="alert alert-danger">
18 LastName is required.
19 </div>
20 </div>
21 <div class="form-group" [class.has-error]="username.invalid && username.touched">
22 <label for="UserName">UserName</label>
23 <input formControlName="username" placeholder="Enter UserName" required type="text" name="UserName" class="form-control" [(ngModel)]="model.UserName" />
24 <div *ngIf="username.invalid && username.touched" class="alert alert-danger">
25 UserName is required.
26 </div>
27 </div>
28 <div class="form-group">
29 <label for="inputPassword">Password</label>
30 <input type="password" id="inputPassword" class="form-control" [ngClass]="{'is-invalid':password.invalid && (password.dirty || password.touched)}"
31 placeholder="Enter Password" class="form-control" [(ngModel)]="model.Password" aria-describedby="passwordHelpBlock" formControlName="password" autocomplete="current-password">
32
33 <password-strength-meter [password]="password.value" [enableFeedback]="true" (strengthChange)="onPasswordStrengthChanged($event)"></password-strength-meter>
34 <small id="passwordHelpBlock" class="form-text text-muted">
35 Your password must be 8-20 characters long,must contain Uppercase ,Lowercase letters,numbers,special characters and must not contain spaces
36 or emoji.
37 </small>
38 <div *ngIf="password.invalid && password.touched " class="alert alert-danger">
39 Please provide a valid Password.
40 </div>
41 <div *ngIf="password.error " class="alert alert-danger">
42 Please provide a valid Password.
43 </div>
44 </div>
45
46 <div class="form-group" [class.has-error]="email.invalid && email.touched">
47 <label for="EmailId">EmailId</label>
48 <input formControlName="email" placeholder="Enter Email Id" required type="email" pattern="[^ @]*@gmail.com*" name ="EmailId" class="form-control" [(ngModel)]="model.EmailId" />
49 <div *ngIf="email.invalid && email.touched" class="alert alert-danger">
50 EmailId is required.
51 </div>
52 </div>
53 <div class="form-group" [class.has-error]="contact.invalid && contact.touched">
54 <label for="Contact">Contact</label>
55 <input formControlName="contact" placeholder="Enter Contact Number" required type="text" pattern="[0-9]{10}" name ="Contact" class="form-control" [(ngModel)]="model.Contact" />
56 <div *ngIf="contact.invalid && contact.touched" class="alert alert-danger">
57 Contact is required.
58 </div>
59 </div>
60 <div class="form-group" [class.has-error]="pan.invalid && pan.touched">
61 <label for="PanNumber">PanNumber</label>
62 <input formControlName="pan" placeholder="Enter pan number" required type="text"
63 name ="PanNumber" class="form-control" [(ngModel)]="model.PanNumber" />
64 <div *ngIf="pan.invalid && pan.touched" class="alert alert-danger">
65 PanNumber is required.
66 </div>
67 </div>
68
69 <div class="form-group">
70 <button type="submit" [disabled]="form.invalid" class="btn btn-primary-success" >Signup</button>
71
72 <button [disabled]="loading" style="float:right" class="btn btn-primary-success" >Cancel</button>
73 </div>
74
75 </form>
76 </div>