Advertisement
Guest User

Untitled

a guest
Jan 2nd, 2017
131
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 4.03 KB | None | 0 0
  1. <div class="mdl-layout mdl-js-layout mdl-color--grey-100">
  2.     <main class="mdl-layout__content">
  3.         <div class="mdl-card mdl-shadow--6dp">
  4.             <div class="mdl-card__title mdl-color--primary mdl-color-text--white">
  5.                 <h2 class="mdl-card__title-text">REGISTER</h2>
  6.             </div>
  7.             <div class="mdl-card__supporting-text">
  8.                 <form name="form" (ngSubmit)="f.form.valid && register()" #f="ngForm" novalidate>
  9.                     <div class="mdl-textfield mdl-js-textfield form-group" [ngClass]="{ 'has-error': !fName.valid }">
  10.                         <input class="mdl-textfield__input form-control" type="text" id="fName" name="firstName" [(ngModel)]="model.firstName"
  11.                             #fName="ngModel" minlength="2" />
  12.                         <label class="mdl-textfield__label" for="fName">First name</label>
  13.                         <div *ngIf="!fName.valid && fName.touched"><span class="mdl-textfield__error">First name must be at least 2 characters long.</span></div>
  14.                     </div>
  15.                     <div class="mdl-textfield mdl-js-textfield form-group" [ngClass]="{ 'has-error': !lName.valid }">
  16.                         <input class="mdl-textfield__input form-control" type="text" id="lName" name="lastName" [(ngModel)]="model.lastName"
  17.                             #lName="ngModel" minlength="2" />
  18.                         <label class="mdl-textfield__label" for="lName">Last name</label>
  19.                         <div *ngIf="!lName.valid && lName.touched"><span class="mdl-textfield__error">Last name must be at least 2 characters long.</span></div>
  20.                     </div>
  21.                     <div class="mdl-textfield mdl-js-textfield form-group" [ngClass]="{ 'has-error': !username.valid }">
  22.                         <input class="mdl-textfield__input form-control" type="text" id="username" name="username" [(ngModel)]="model.username"
  23.                             #username="ngModel" required />
  24.                         <label class="mdl-textfield__label" for="username">Username</label>
  25.                         <div *ngIf="!username.valid && username.touched"><span class="mdl-textfield__error">Username is required!</span></div>
  26.                     </div>
  27.                     <div class="mdl-textfield mdl-js-textfield form-group" [ngClass]="{ 'has-error': !password.valid }" >
  28.                         <input class="mdl-textfield__input form-control" id="userpass" type="password" name="password" [(ngModel)]="model.password"
  29.                             #password="ngModel" required validateEqual="confirmPassword" reverse="true" />
  30.                         <label class="mdl-textfield__label" for="userpass">Password</label>
  31.                         <div *ngIf="!password.valid && password.touched"><span class="mdl-textfield__error">Password is required!</span></div>
  32.                     </div>
  33.                     <div class="mdl-textfield mdl-js-textfield form-group" validateEqual="password" [ngClass]="{ 'has-error': !confirmPassword.valid }" >
  34.                         <input class="mdl-textfield__input form-control" id="confirmPassword" type="password" name="confirmPassword" [(ngModel)]="model.confirmPassword"
  35.                             #confirmPassword="ngModel" required validateEqual="password" />
  36.                         <label class="mdl-textfield__label" for="confirmPassword">Confirm password</label>
  37.                         <div *ngIf="!confirmPassword.valid">
  38.                             <span class="custom-validation-error" [style.visibility]="!confirmPassword.valid && confirmPassword.touched ? 'visible' : 'hidden'">Passwords should match.</span>
  39.                         </div>
  40.                     </div>
  41.                     <div class="mdl-textfield mdl-js-textfield form-group" [ngClass]="{ 'has-error': !email.valid }">
  42.                         <input class="mdl-textfield__input form-control" type="email" id="email" name="email" [(ngModel)]="model.email"
  43.                             #email="ngModel" required pattern="[a-zA-Z0–9_.-]+@[a-zA-Z0–9-]+.[a-zA-Z0–9.-]+" />
  44.                         <label class="mdl-textfield__label" for="email">Email</label>
  45.                         <div *ngIf="!email.valid && email.touched"><span class="mdl-textfield__error">Email is required and format should be <i>john@doe.com</i>.</span></div>
  46.                     </div>
  47.                     <input type="file" name="imageUrl" (change)="onImageChange($event)" />
  48.                     <div class="mdl-card__actions mdl-card--border form-group">
  49.                         <div *ngIf="loading" class="mdl-spinner mdl-js-spinner is-active"></div>
  50.                         <button class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" [disabled]="loading || !f.form.valid">Register</button>
  51.                     </div>
  52.                 </form>
  53.             </div>
  54.         </div>
  55.     </main>
  56. </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement