portal-FE-os/src/app/pages/users/user-details-form/user-details-form.component.html

   1 <div class="modal-body">
   2   <form [formGroup]="addNewUserForm">
   3     <div class="modal-body">
   4       <div class="new-users-details-modal">
   5         <div class="new-users-main">
   6
   7           <!-- First Name -->
   8           <div class="new-users-container">
   9             <div class="form-group">
  10               <div>*First Name</div>
  11               <input class="form-control" formControlName="firstName" type="text"
  12                 [ngClass]="{ 'is-invalid': submitted && formValue.firstName.errors }" />
  13               <div *ngIf="submitted && formValue.firstName.errors" class="invalid-feedback">
  14                 <div *ngIf="formValue.firstName.errors.required">
  15                   First Name is required
  16                 </div>
  17               </div>
  18             </div>
  19           </div>
  20
  21           <!-- Middle Name -->
  22           <div class="new-users-container">
  23             <div class="form-group">
  24               <div>Middle Name</div>
  25               <input class="form-control" formControlName="middleInitial" type="text" />
  26             </div>
  27           </div>
  28
  29           <!-- Last Name -->
  30           <div class="new-users-container">
  31             <div class="form-group">
  32               <div>*Last Name</div>
  33               <input class="form-control" formControlName="lastName" type="text"
  34                 [ngClass]="{ 'is-invalid': submitted && formValue.lastName.errors }" />
  35               <div *ngIf="submitted && formValue.lastName.errors" class="invalid-feedback">
  36                 <div *ngIf="formValue.lastName.errors.required">
  37                   Last Name is required
  38                 </div>
  39               </div>
  40             </div>
  41           </div>
  42
  43           <!-- Email Address ID -->
  44           <div class="new-users-container">
  45             <div class="form-group">
  46               <div>*Email Address ID</div>
  47               <input class="form-control" formControlName="email" type="text"
  48                 [ngClass]="{ 'is-invalid': submitted && formValue.email.errors }" />
  49               <div *ngIf="submitted && formValue.email.errors" class="invalid-feedback">
  50                 <div *ngIf="formValue.email.errors.required">
  51                   Email Address is required
  52                 </div>
  53                 <div *ngIf="formValue.email.errors.email">
  54                   Email Address is invalid
  55                 </div>
  56               </div>
  57             </div>
  58           </div>
  59
  60           <!-- Login ID -->
  61           <div class="new-users-container">
  62             <div class="form-group">
  63               <div>*Login ID</div>
  64               <input class="form-control" formControlName="loginId" type="text"
  65                 [ngClass]="{ 'is-invalid': submitted && formValue.loginId.errors }" />
  66               <div *ngIf="submitted && formValue.loginId.errors" class="invalid-feedback">
  67                 <div *ngIf="formValue.loginId.errors.required">
  68                   Login ID is required
  69                 </div>
  70               </div>
  71             </div>
  72           </div>
  73
  74           <!-- Login Password -->
  75           <div class="new-users-container">
  76             <div class="form-group">
  77               <div>*Login Password</div>
  78               <input class="form-control" formControlName="loginPwd" type="password"
  79                 [ngClass]="{ 'is-invalid': submitted && formValue.loginPwd.errors }" />
  80               <div *ngIf="submitted && formValue.loginPwd.errors" class="invalid-feedback">
  81                 <div *ngIf="formValue.loginPwd.errors.required">
  82                   Password is required
  83                 </div>
  84                 <div *ngIf="formValue.loginPwd.errors.minlength">
  85                   Password must be at least 8 characters
  86                 </div>
  87               </div>
  88             </div>
  89           </div>
  90
  91           <!-- Confirm Login Password -->
  92           <div class="new-users-container">
  93             <div class="form-group">
  94               <div>*Confirm Password</div>
  95               <input class="form-control" formControlName="confirmPassword" type="password"
  96                 [ngClass]="{ 'is-invalid': submitted && formValue.confirmPassword.errors }"
  97                 appEqualValidator="password" />
  98               <div *ngIf="submitted && formValue.confirmPassword.errors" class="invalid-feedback">
  99                 <div *ngIf="formValue.confirmPassword.errors.required">
 100                   Confirm Login password
 101                 </div>
 102                 <div *ngIf="formValue.confirmPassword.errors.mustMatch">
 103                   Password Must Match
 104                 </div>
 105               </div>
 106             </div>
 107           </div>
 108
 109
 110         </div>
 111       </div>
 112     </div>
 113   </form>
 114 </div>
 115 <div class="modal-footer">
 116   <button type="submit" class="btn btn-primary" (click)="addUser()">Next</button> &nbsp;
 117     <button type="button" class="btn btn-primary" aria-label="Close" (click)="activeModal.dismiss('Cross')">Close</button>
 118 </div>