<div class="content__title">
|
<h1>
|
Form Validation
|
<small>Native Angular input validation</small>
|
</h1>
|
<div class="text-right">
|
<button nz-button (click)="loadData()" [nzLoading]="loading">
|
<span>Load User Data</span>
|
</button>
|
</div>
|
</div>
|
<div nz-row [nzGutter]="16">
|
<div nz-col [nzMd]="24">
|
<nz-card>
|
<form nz-form [formGroup]="form" (ngSubmit)="_submitForm()">
|
<fieldset>
|
<legend>Built-in</legend>
|
<div nz-form-item nz-row>
|
<div nz-form-label nz-col [nzSm]="4">
|
<label for="nickname" nz-form-item-required>
|
<span>
|
Nickname
|
<nz-tooltip [nzTitle]="'What do you want other to call you'">
|
<i nz-tooltip class="anticon anticon-question-circle-o"></i>
|
</nz-tooltip>
|
</span>
|
</label>
|
</div>
|
<div nz-form-control nz-col [nzSm]="20" nzHasFeedback [nzValidateStatus]="nickname">
|
<nz-input formControlName="nickname" nzPlaceHolder="minlength=6" [nzId]="'nickname'"></nz-input>
|
<ng-container *ngIf="nickname.dirty || nickname.touched">
|
<p nz-form-explain *ngIf="nickname.errors?.required">Please input your nickname!</p>
|
<p nz-form-explain *ngIf="nickname.errors?.checked">Only input 'cipchk'</p>
|
<p nz-form-explain *ngIf="nickname.errors?.minlength">This field requires a min length</p>
|
</ng-container>
|
</div>
|
</div>
|
<div nz-form-item nz-row>
|
<div nz-form-label nz-col [nzSm]="4">
|
<label for="email" nz-form-item-required>E-mail</label>
|
</div>
|
<div nz-form-control nz-col [nzSm]="20" nzHasFeedback [nzValidateStatus]="email">
|
<nz-input formControlName="email" [nzId]="'email'"></nz-input>
|
<div nz-form-explain *ngIf="(email.dirty || email.touched) && email.errors?.email">The input is not valid E-mail!</div>
|
</div>
|
</div>
|
<div nz-form-item nz-row>
|
<div nz-form-label nz-col [nzSm]="4">
|
<label for="password" nz-form-item-required>Password</label>
|
</div>
|
<div nz-form-control nz-col [nzSm]="20" nzHasFeedback [nzValidateStatus]="password">
|
<nz-input formControlName="password" [nzType]="'password'" [nzId]="'password'"></nz-input>
|
<div nz-form-explain *ngIf="(password.dirty || password.touched) && password.errors?.required">Please input your password!</div>
|
</div>
|
</div>
|
<div nz-form-item nz-row>
|
<div nz-form-label nz-col [nzSm]="4">
|
<label for="checkPassword" nz-form-item-required>Confirm Password</label>
|
</div>
|
<div nz-form-control nz-col [nzSm]="20" nzHasFeedback [nzValidateStatus]="checkPassword">
|
<nz-input formControlName="checkPassword" [nzType]="'password'" [nzId]="'checkPassword'"></nz-input>
|
<ng-container *ngIf="checkPassword.dirty || checkPassword.touched">
|
<p nz-form-explain *ngIf="checkPassword.errors?.required">Please confirm your password!</p>
|
<p nz-form-explain *ngIf="checkPassword.errors?.checked">Two passwords that you enter is inconsistent!</p>
|
</ng-container>
|
</div>
|
</div>
|
<div nz-form-item nz-row>
|
<div nz-form-label nz-col [nzSm]="4">
|
<label for="phoneNumber" nz-form-item-required>Phone Number</label>
|
</div>
|
<div nz-form-control nz-col [nzSm]="20" nzHasFeedback [nzValidateStatus]="phoneNumber">
|
<nz-input-group [nzCompact]="true">
|
<nz-select formControlName="phoneNumberPrefix" style="width: 25%;">
|
<nz-option [nzLabel]="'+86'" [nzValue]="'+86'"></nz-option>
|
<nz-option [nzLabel]="'+87'" [nzValue]="'+87'"></nz-option>
|
</nz-select>
|
<input formControlName="phoneNumber" id="'phoneNumber'" nz-input style="width: 75%;">
|
</nz-input-group>
|
<div nz-form-explain *ngIf="(phoneNumber.dirty || phoneNumber.touched) && phoneNumber.errors?.required">Please input your phone number!</div>
|
</div>
|
</div>
|
<div nz-form-item nz-row>
|
<div nz-form-label nz-col [nzSm]="4">
|
<label for="website" nz-form-item-required>Website</label>
|
</div>
|
<div nz-form-control nz-col [nzSm]="20" nzHasFeedback [nzValidateStatus]="website">
|
<nz-input formControlName="website" [nzId]="'website'"></nz-input>
|
<div nz-form-explain *ngIf="(website.dirty || website.touched) && website.errors?.required">Please input website!</div>
|
</div>
|
</div>
|
<div nz-form-item nz-row>
|
<div nz-form-label nz-col [nzSm]="4">
|
<label nz-form-item-required>Status</label>
|
</div>
|
<div nz-form-control nz-col [nzSm]="20" [nzValidateStatus]="status">
|
<nz-radio-group formControlName="status">
|
<label nz-radio [nzValue]="'normal'">
|
<span>Normal</span>
|
</label>
|
<label nz-radio [nzValue]="'lock'">
|
<span>Lock</span>
|
</label>
|
<label nz-radio [nzValue]="'deleted'">
|
<span>Deleted</span>
|
</label>
|
</nz-radio-group>
|
<div nz-form-explain *ngIf="(status.dirty || status.touched) && status.errors?.required">Please choose status!</div>
|
</div>
|
</div>
|
<div nz-form-item nz-row>
|
<div nz-form-label nz-col [nzSm]="4">
|
<label nz-form-item-required>date</label>
|
</div>
|
<div nz-form-control nz-col [nzSm]="20">
|
<div nz-col [nzSpan]="4">
|
<div nz-form-control [nzValidateStatus]="start">
|
<nz-datepicker formControlName="start"></nz-datepicker>
|
<div nz-form-explain *ngIf="(start.dirty || start.touched) && start.errors?.required">Select date</div>
|
</div>
|
</div>
|
<div nz-col [nzSpan]="1"><p nz-form-split>-</p></div>
|
<div nz-col [nzSpan]="4">
|
<div nz-form-control [nzValidateStatus]="end">
|
<nz-datepicker formControlName="end"></nz-datepicker>
|
<div nz-form-explain *ngIf="(end.dirty || end.touched) && end.errors?.required">Select date</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div nz-form-item nz-row>
|
<div nz-form-label nz-col [nzSm]="4">
|
<label for="captcha" nz-form-item-required>Captcha</label>
|
</div>
|
<div nz-form-control nz-col [nzSm]="20" [nzValidateStatus]="captcha">
|
<div nz-row [nzGutter]="8">
|
<div nz-col [nzSpan]="12">
|
<nz-input formControlName="captcha" [nzId]="'captcha'"></nz-input>
|
</div>
|
<div nz-col [nzSpan]="12">
|
<button nz-button (click)="getCaptcha($event)">Get captcha</button>
|
</div>
|
</div>
|
<div nz-form-extra>We must make sure that your are a human.</div>
|
<div nz-form-explain *ngIf="(captcha.dirty || captcha.touched) && captcha.errors?.required">Please input the captcha you got!</div>
|
</div>
|
</div>
|
</fieldset>
|
<fieldset>
|
<legend>Extended</legend>
|
</fieldset>
|
<div nz-form-item nz-row>
|
<div nz-form-control nz-col [nzSpan]="20" [nzOffset]="4">
|
<label nz-checkbox formControlName="agree">
|
<span>I have read the <a>agreement</a></span>
|
</label>
|
</div>
|
</div>
|
<div nz-form-item nz-row class="mb0">
|
<div nz-form-control nz-col [nzSpan]="20" [nzOffset]="4">
|
<button nz-button [nzType]="'primary'" [disabled]="form.invalid">Register</button>
|
<button nz-button (click)="form.reset()">Reset</button>
|
</div>
|
</div>
|
</form>
|
</nz-card>
|
</div>
|
</div>
|
