- Timestamp:
- 01/24/22 21:08:32 (3 years ago)
- Branches:
- master
- Children:
- 76712b2
- Parents:
- bdd6491
- File:
-
- 1 edited
Legend:
- Unmodified
- Added
- Removed
-
trip-planner-front/src/app/homepage/register/register.component.html
rbdd6491 rb738035 2 2 integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> 3 3 4 <div class="p-grid p-fluid">5 <div class="p-col-12 p-md-4">6 <div class="p-inputgroup">7 <span class="p-inputgroup-addon"><i class="pi pi-user"></i></span>8 <input type="text" pInputText placeholder="Full name" [(ngModel)]="user.fullName" name="fullName"9 class="form-control">10 4 5 <div class="readersack"> 6 <div class="container"> 7 <div class="row"> 8 <div class="col-md-6 offset-md-3"> 9 <form [formGroup]="form" #myform="ngForm" (ngSubmit)="onFormSubmitSignUp(user)"> 10 <div class="form-group"> 11 <label>Full name</label> 12 <input formControlName="fullName" id="fullName" type="text" class="form-control" 13 [(ngModel)]="user.fullName" 14 [ngClass]="{ 'is-invalid': myform.submitted && form.get('fullName')?.errors?.['required']}" /> 15 <div *ngIf="myform.submitted && form.get('fullName')?.errors" class="invalid-feedback"> 16 <div *ngIf="form.get('fullName')?.hasError('required') && myform.submitted"> 17 Full Name is required 18 </div> 19 </div> 20 21 <label>Username (email)</label> 22 <input formControlName="username" id="username" type="text" class="form-control" 23 [(ngModel)]="user.username" 24 [ngClass]="{ 'is-invalid': myform.submitted && (form.get('username')?.errors?.['required'] || 25 form.get('username')?.errors?.['email'] || form.get('username')?.hasError('validateUsername'))}" /> 26 <div *ngIf="form.get('username')?.hasError('required') && myform.submitted" 27 class="invalid-feedback"> 28 Username is required</div> 29 <div *ngIf="form.get('username')?.hasError('email') && myform.submitted" 30 class="invalid-feedback"> 31 Please enter valid email.</div> 32 <div *ngIf="form.get('username')?.hasError('validateUsername') && myform.submitted" 33 class="invalid-feedback"> 34 Username already exists</div> 35 36 37 38 <label>Password</label> 39 <input formControlName="password" id="password" type="password" class="form-control" 40 [(ngModel)]="user.password" [ngClass]="{ 'is-invalid': myform.submitted && (form.get('password')?.errors?.['required'] || 41 form.get('password')?.errors?.['minlength'])}" /> 42 <div *ngIf="form.get('password')?.hasError('required') && myform.submitted" 43 class="invalid-feedback"> 44 Password is required</div> 45 <div *ngIf="form.get('password')?.errors?.['minlength'] && myform.submitted" 46 class="invalid-feedback"> 47 Password must be at least 6 characters long. 48 </div> 49 50 <label>Confirm password</label> 51 <input formControlName="confirmPassword" id="confirmPassword" type="password" 52 class="form-control" [(ngModel)]="user.confirmPassword" 53 [ngClass]="{ 'is-invalid': myform.submitted && (form.get('confirmPassword')?.errors?.['required'] || 54 form.get('confirmPassword')?.errors?.['minlength'] || form.get('confirmPassword')?.errors?.['mustMatch'])}" /> 55 <div *ngIf="form.get('confirmPassword')?.hasError('required') && myform.submitted" 56 class="invalid-feedback"> 57 Confirm Password is required</div> 58 <div *ngIf="form.get('confirmPassword')?.errors?.['minlength'] && myform.submitted" 59 class="invalid-feedback"> 60 Confirm Password must be at least 6 characters long. 61 </div> 62 <div *ngIf="form.get('confirmPassword')?.errors?.['mustMatch'] && myform.submitted" 63 class="invalid-feedback">Password and confirm password must match 64 </div> 65 66 <div class="p-col-12 p-md-4"> 67 <button type="submit" pButton pRipple class="p-button-secondary">Submit</button> 68 </div> 69 </div> 70 </form> 71 </div> 11 72 </div> 12 73 </div> 13 14 <div class="p-col-12 p-md-4">15 <div class="p-inputgroup">16 <span class="p-inputgroup-addon"><i class="pi pi-user"></i></span>17 <input type="text" pInputText placeholder="Email address (Username)" [(ngModel)]="user.username"18 name="username">19 </div>20 </div>21 22 <div class="p-col-12 p-md-4">23 <div class="p-inputgroup">24 <span class="p-inputgroup-addon"><i class="pi pi-password"></i></span>25 <input type="password" pInputText placeholder="Password" [(ngModel)]="user.password" name="password">26 </div>27 </div>28 29 <div class="p-col-12 p-md-4">30 <div class="p-inputgroup">31 <span class="p-inputgroup-addon"><i class="pi pi-password"></i></span>32 <input type="password" pInputText placeholder="Repeat password" [(ngModel)]="user.confirmPassword"33 name="confirmPassword">34 </div>35 </div>36 37 <div class="p-col-12 p-md-4">38 <button pButton pRipple label="Submit" class="p-button-secondary" type="button"39 (click)="onFormSubmitSignUp(user)"></button>40 </div>41 74 </div> 42 43
Note:
See TracChangeset
for help on using the changeset viewer.
