Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <form #form="ngForm" novalidate>
- <header>
- <i class="fa fa-users"></i> Register
- </header>
- <fieldset class="nomargin">
- <div class="form-group">
- <div class="row">
- <div class="col-sm-12" [class.has-error]="username.touched && username.invalid">
- <input [(ngModel)]='registration.username' class="form-control" #username="ngModel" name="username" type="text"autofocus="" required="true" placeholder="Username" >
- <i class="ico-append fa fa-user right-25"></i>
- <div class='alert-danger' *ngIf="username.touched && username.invalid">
- username is required
- </div>
- <b class="tooltip tooltip-bottom-right">Needed to identify you during login</b>
- </div>
- </div>
- </div>
- <div class="form-group">
- <div class="row">
- <div class="col-sm-12" [class.has-error]="password.touched && password.invalid">
- <input [(ngModel)]='registration.password' class="form-control" #password="ngModel" name="password" type="password" pattern='^....+' required="true" placeholder="Password">
- <i class="ico-append fa fa-lock right-25"></i>
- <div class='alert-danger' *ngIf="password.touched && password.invalid">
- Password must be atleast 4 characters long
- </div>
- <div class='alert-danger' *ngIf='password.touched && registration.password==""'>
- Please enter a password
- </div>
- <b class="tooltip tooltip-bottom-right">Only characters and numbers</b>
- </div>
- </div>
- </div>
- <div class="form-group">
- <div class="row">
- <div class="col-sm-12 " [class.has-error]="validateConfirmPassword(confirmPassword.touched)">
- <input [(ngModel)]='registration.confirmPassword'
- class="form-control"
- #confirmPassword="ngModel"
- name="confirmPassword"
- type="password"
- required="true"
- placeholder="Confirm password">
- <i class="ico-append fa fa-lock right-25"></i>
- <div class='alert-danger' *ngIf="registration.confirmPassword!=registration.password && confirmPassword.touched">
- Does not match password
- </div>
- <b class="tooltip tooltip-bottom-right">Only characters and numbers</b>
- </div>
- </div>
- </div>
- <div class="form-group">
- <div class="row">
- <div class="col-sm-12 " [class.has-error]="emailAddress.touched && emailAddress.invalid">
- <input [(ngModel)]='registration.emailAddress' class="form-control" #emailAddress="ngModel" name="emailAddress" type="text" required="true" placeholder="Email address">
- <i class="ico-append fa fa-envelope right-25"></i>
- <div class='alert-danger' *ngIf="emailAddress.touched && emailAddress.invalid">
- Email address is required
- </div>
- <b class="tooltip tooltip-bottom-right">Needed to verify your account</b>
- </div>
- </div>
- </div>
- <div class="form-group">
- <div class="row">
- <div class="col-sm-6 " [class.has-error]="firstName.touched && firstName.invalid">
- <input [(ngModel)]='registration.firstName' class="form-control" #firstName="ngModel" name="firstName" type="text" required="true" placeholder="First name">
- <div class='alert-danger' *ngIf="firstName.touched && firstName.invalid">
- First Name is required
- </div>
- </div>
- <div class="col-sm-6" [class.has-error]="lastName.touched && lastName.invalid">
- <input [(ngModel)]='registration.lastName' class="form-control" #lastName="ngModel" name="lastName" type="text" required="true" placeholder="Last name">
- <div class='alert-danger' *ngIf="lastName.touched && lastName.invalid">
- Last Name is required
- </div>
- </div>
- </div>
- </div>
- <div class="select margin-bottom-10 margin-top-20">
- <div class="form-group" [class.has-error]='gender.touched && registration.gender=="default"'>
- <select [(ngModel)]='registration.gender' class="form-control" #gender="ngModel" name="gender" >
- <option value="default" default disabled>Gender</option>
- <option value="Male">Male</option>
- <option value="Female">Female</option>
- </select>
- <div class='alert-danger' *ngIf='gender.touched && registration.gender=="default"'>
- Please select a Gender
- </div>
- </div>
- </div>
- <div class="margin-top-30">
- <div class="nomargin" >
- <label class="checkbox nomargin has-error">
- <input [(ngModel)]='registration.acceptTerms'
- (change)="validateTerms(!acceptTerms.value)"
- class="checked-agree"
- #acceptTerms="ngModel"
- name="acceptTerms"
- required="true"
- type="checkbox">
- <i [class.checkbox-error]="displayTermsValidaionError" ></i>
- I agree to the <a href="#" data-toggle="modal" data-target="#termsModal">Terms of Service</a>
- </label>
- </div>
- </div>
- </fieldset>
- <div class="row margin-bottom-20">
- <div class="col-md-12">
- <button type="submit" class="btn btn-primary" (click)="register()" ><i class="fa fa-check"></i> REGISTER</button>
- </div>
- </div>
- {{result.messageResult}}
- </form>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement