Advertisement
Guest User

Untitled

a guest
Jan 27th, 2017
1,288
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.67 KB | None | 0 0
  1. <form #form="ngForm" novalidate>
  2. <header>
  3. <i class="fa fa-users"></i> Register
  4. </header>
  5. <fieldset class="nomargin">
  6. <div class="form-group">
  7. <div class="row">
  8. <div class="col-sm-12" [class.has-error]="username.touched && username.invalid">
  9. <input [(ngModel)]='registration.username' class="form-control" #username="ngModel" name="username" type="text"autofocus="" required="true" placeholder="Username" >
  10. <i class="ico-append fa fa-user right-25"></i>
  11.  
  12. <div class='alert-danger' *ngIf="username.touched && username.invalid">
  13. username is required
  14. </div>
  15. <b class="tooltip tooltip-bottom-right">Needed to identify you during login</b>
  16. </div>
  17. </div>
  18. </div>
  19. <div class="form-group">
  20. <div class="row">
  21. <div class="col-sm-12" [class.has-error]="password.touched && password.invalid">
  22. <input [(ngModel)]='registration.password' class="form-control" #password="ngModel" name="password" type="password" pattern='^....+' required="true" placeholder="Password">
  23. <i class="ico-append fa fa-lock right-25"></i>
  24. <div class='alert-danger' *ngIf="password.touched && password.invalid">
  25. Password must be atleast 4 characters long
  26. </div>
  27. <div class='alert-danger' *ngIf='password.touched && registration.password==""'>
  28. Please enter a password
  29. </div>
  30. <b class="tooltip tooltip-bottom-right">Only characters and numbers</b>
  31. </div>
  32. </div>
  33. </div>
  34. <div class="form-group">
  35. <div class="row">
  36. <div class="col-sm-12 " [class.has-error]="validateConfirmPassword(confirmPassword.touched)">
  37. <input [(ngModel)]='registration.confirmPassword'
  38. class="form-control"
  39. #confirmPassword="ngModel"
  40. name="confirmPassword"
  41. type="password"
  42. required="true"
  43. placeholder="Confirm password">
  44. <i class="ico-append fa fa-lock right-25"></i>
  45. <div class='alert-danger' *ngIf="registration.confirmPassword!=registration.password && confirmPassword.touched">
  46. Does not match password
  47. </div>
  48. <b class="tooltip tooltip-bottom-right">Only characters and numbers</b>
  49. </div>
  50. </div>
  51. </div>
  52. <div class="form-group">
  53. <div class="row">
  54. <div class="col-sm-12 " [class.has-error]="emailAddress.touched && emailAddress.invalid">
  55. <input [(ngModel)]='registration.emailAddress' class="form-control" #emailAddress="ngModel" name="emailAddress" type="text" required="true" placeholder="Email address">
  56. <i class="ico-append fa fa-envelope right-25"></i>
  57. <div class='alert-danger' *ngIf="emailAddress.touched && emailAddress.invalid">
  58. Email address is required
  59. </div>
  60. <b class="tooltip tooltip-bottom-right">Needed to verify your account</b>
  61. </div>
  62. </div>
  63. </div>
  64. <div class="form-group">
  65. <div class="row">
  66. <div class="col-sm-6 " [class.has-error]="firstName.touched && firstName.invalid">
  67. <input [(ngModel)]='registration.firstName' class="form-control" #firstName="ngModel" name="firstName" type="text" required="true" placeholder="First name">
  68. <div class='alert-danger' *ngIf="firstName.touched && firstName.invalid">
  69. First Name is required
  70. </div>
  71. </div>
  72. <div class="col-sm-6" [class.has-error]="lastName.touched && lastName.invalid">
  73. <input [(ngModel)]='registration.lastName' class="form-control" #lastName="ngModel" name="lastName" type="text" required="true" placeholder="Last name">
  74. <div class='alert-danger' *ngIf="lastName.touched && lastName.invalid">
  75. Last Name is required
  76. </div>
  77. </div>
  78. </div>
  79. </div>
  80. <div class="select margin-bottom-10 margin-top-20">
  81. <div class="form-group" [class.has-error]='gender.touched && registration.gender=="default"'>
  82. <select [(ngModel)]='registration.gender' class="form-control" #gender="ngModel" name="gender" >
  83. <option value="default" default disabled>Gender</option>
  84. <option value="Male">Male</option>
  85. <option value="Female">Female</option>
  86. </select>
  87. <div class='alert-danger' *ngIf='gender.touched && registration.gender=="default"'>
  88. Please select a Gender
  89. </div>
  90. </div>
  91. </div>
  92. <div class="margin-top-30">
  93. <div class="nomargin" >
  94. <label class="checkbox nomargin has-error">
  95. <input [(ngModel)]='registration.acceptTerms'
  96. (change)="validateTerms(!acceptTerms.value)"
  97. class="checked-agree"
  98. #acceptTerms="ngModel"
  99. name="acceptTerms"
  100. required="true"
  101. type="checkbox">
  102. <i [class.checkbox-error]="displayTermsValidaionError" ></i>
  103. I agree to the <a href="#" data-toggle="modal" data-target="#termsModal">Terms of Service</a>
  104. </label>
  105. </div>
  106. </div>
  107. </fieldset>
  108. <div class="row margin-bottom-20">
  109. <div class="col-md-12">
  110. <button type="submit" class="btn btn-primary" (click)="register()" ><i class="fa fa-check"></i> REGISTER</button>
  111. </div>
  112. </div>
  113. {{result.messageResult}}
  114. </form>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement