<div class="content__title">
|
<h1>
|
Form Elements
|
<small>Native support</small>
|
</h1>
|
</div>
|
<div nz-row [nzGutter]="16">
|
<div nz-col [nzMd]="24">
|
<nz-card nzTitle="Inline Form">
|
<form nz-form [nzLayout]="'inline'">
|
<div nz-form-item>
|
<div nz-form-control>
|
<nz-input [nzPlaceHolder]="'username'">
|
<ng-template #prefix><i class="anticon anticon-user"></i></ng-template>
|
</nz-input>
|
</div>
|
</div>
|
<div nz-form-item>
|
<div nz-form-control>
|
<nz-input [nzType]="'password'" [nzPlaceHolder]="'Password'">
|
<ng-template #prefix><i class="anticon anticon-lock"></i></ng-template>
|
</nz-input>
|
</div>
|
</div>
|
<div nz-form-item>
|
<div nz-form-control>
|
<label nz-checkbox>
|
<span>Remember me</span>
|
</label>
|
</div>
|
</div>
|
<div nz-form-item>
|
<div nz-form-control>
|
<button nz-button [nzType]="'primary'">Login</button>
|
<button nz-button>Register</button>
|
</div>
|
</div>
|
</form>
|
</nz-card>
|
</div>
|
</div>
|
<div nz-row [nzGutter]="16">
|
<div nz-col [nzMd]="12">
|
<nz-card nzTitle="Horizontal Form">
|
<form nz-form>
|
<div nz-form-item nz-row>
|
<div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
|
<label for="h-username" nz-form-item-required>Username</label>
|
</div>
|
<div nz-form-control nz-col [nzSm]="14" [nzXs]="24">
|
<nz-input [nzId]="'h-username'" [nzPlaceHolder]="'username'">
|
<ng-template #prefix><i class="anticon anticon-user"></i></ng-template>
|
</nz-input>
|
</div>
|
</div>
|
<div nz-form-item nz-row>
|
<div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
|
<label for="h-password" nz-form-item-required>Password</label>
|
</div>
|
<div nz-form-control nz-col [nzSm]="14" [nzXs]="24">
|
<nz-input [nzId]="'h-password'" [nzType]="'password'" [nzPlaceHolder]="'Password'">
|
<ng-template #prefix><i class="anticon anticon-lock"></i></ng-template>
|
</nz-input>
|
</div>
|
</div>
|
<div nz-form-item nz-row>
|
<div nz-form-control nz-col [nzSpan]="14" [nzXs]="24" [nzOffset]="6">
|
<label nz-checkbox>
|
<span>Remember me</span>
|
</label>
|
</div>
|
</div>
|
<div nz-form-item nz-row class="mb0">
|
<div nz-form-control nz-col [nzSpan]="14" [nzXs]="24" [nzOffset]="6">
|
<button nz-button [nzType]="'primary'">Login</button>
|
<button nz-button>Register</button>
|
</div>
|
</div>
|
</form>
|
</nz-card>
|
</div>
|
<div nz-col [nzMd]="12">
|
<nz-card nzTitle="Vertical Form">
|
<form nz-form>
|
<div nz-form-item nz-row>
|
<div nz-form-label>
|
<label for="v-username" nz-form-item-required>Username</label>
|
</div>
|
<div nz-form-control>
|
<nz-input [nzId]="'v-username'" [nzPlaceHolder]="'username'">
|
<ng-template #prefix><i class="anticon anticon-user"></i></ng-template>
|
</nz-input>
|
</div>
|
</div>
|
<div nz-form-item nz-row>
|
<div nz-form-label>
|
<label for="v-password" nz-form-item-required>Password</label>
|
</div>
|
<div nz-form-control>
|
<nz-input [nzId]="'v-password'" [nzType]="'password'" [nzPlaceHolder]="'Password'">
|
<ng-template #prefix><i class="anticon anticon-lock"></i></ng-template>
|
</nz-input>
|
</div>
|
</div>
|
<div nz-form-item nz-row>
|
<div nz-form-control>
|
<label nz-checkbox>
|
<span>Remember me</span>
|
</label>
|
</div>
|
</div>
|
<div nz-form-item nz-row class="mb0">
|
<div nz-form-control>
|
<button nz-button [nzType]="'primary'">Login</button>
|
<button nz-button>Register</button>
|
</div>
|
</div>
|
</form>
|
</nz-card>
|
</div>
|
</div>
|
<div nz-row [nzGutter]="16">
|
<div nz-col [nzMd]="24">
|
<nz-card nzTitle="Search Form">
|
<form nz-form [formGroup]="validateForm">
|
<div nz-row [nzGutter]="32">
|
<div nz-col [nzSpan]="8" *ngFor="let control of controlArray" [class.d-none]="!control.show">
|
<div nz-form-item nz-row>
|
<div nz-form-label nz-col [nzSpan]="5">
|
<label [attr.for]="'field' + control.index">Field {{control.index}}</label>
|
</div>
|
<div nz-form-control nz-col [nzSpan]="19">
|
<nz-input [nzSize]="'large'" [nzPlaceHolder]="'placeholder'" [formControlName]="'field'+control.index" [nzId]="'field'+control.index"></nz-input>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div nz-row>
|
<div nz-col [nzSpan]="24" class="text-right">
|
<button nz-button [nzType]="'primary'">Search</button>
|
<button nz-button (click)="resetForm()">Clear</button>
|
<a class="pl-sm" (click)="toggleCollapse()">
|
Collapse
|
<i class="anticon" [class.anticon-down]="isCollapse" [class.anticon-up]="!isCollapse"></i>
|
</a>
|
</div>
|
</div>
|
</form>
|
</nz-card>
|
</div>
|
</div>
|
<div nz-row [nzGutter]="16">
|
<div nz-col [nzMd]="24">
|
<nz-card nzTitle="Form elements">
|
<form nz-form>
|
<div nz-form-item nz-row>
|
<div nz-form-label nz-col [nzSm]="4">
|
<label>
|
Plain Text
|
<nz-tooltip [nzTitle]="'What do you want other to call you'">
|
<i nz-tooltip class="anticon anticon-question-circle-o"></i>
|
</nz-tooltip>
|
</label>
|
</div>
|
<div nz-form-control nz-col [nzSm]="20">
|
<span nz-form-text>China</span>
|
</div>
|
</div>
|
<div nz-form-item nz-row>
|
<div nz-form-label nz-col [nzSm]="4">
|
<label>Normal Text</label>
|
</div>
|
<div nz-form-control nz-col [nzSm]="20">
|
<nz-input></nz-input>
|
</div>
|
</div>
|
<div nz-form-item nz-row>
|
<div nz-form-label nz-col [nzSm]="4">
|
<label for="label-focus">Label focus</label>
|
</div>
|
<div nz-form-control nz-col [nzSm]="20">
|
<nz-input [nzId]="'label-focus'"></nz-input>
|
</div>
|
</div>
|
<div nz-form-item nz-row>
|
<div nz-form-label nz-col [nzSm]="4">
|
<label nz-form-item-required>Required</label>
|
</div>
|
<div nz-form-control nz-col [nzSm]="20">
|
<nz-input></nz-input>
|
</div>
|
</div>
|
<div nz-form-item nz-row>
|
<div nz-form-label nz-col [nzSm]="4">
|
<label>With Help</label>
|
</div>
|
<div nz-form-control nz-col [nzSm]="20">
|
<nz-input></nz-input>
|
<div nz-form-explain>longgggggggggggggggggggggggggggggggggg</div>
|
</div>
|
</div>
|
<div nz-form-item nz-row>
|
<div nz-form-label nz-col [nzSm]="4">
|
<label>Placeholder</label>
|
</div>
|
<div nz-form-control nz-col [nzSm]="20">
|
<nz-input [nzPlaceHolder]="'placeholder'"></nz-input>
|
</div>
|
</div>
|
<div nz-form-item nz-row>
|
<div nz-form-label nz-col [nzSm]="4">
|
<label>Disabled</label>
|
</div>
|
<div nz-form-control nz-col [nzSm]="20">
|
<nz-input [nzDisabled]="true"></nz-input>
|
</div>
|
</div>
|
<div nz-form-item nz-row>
|
<div nz-form-label nz-col [nzSm]="4">
|
<label>Textarea</label>
|
</div>
|
<div nz-form-control nz-col [nzSm]="20">
|
<nz-input [nzType]="'textarea'"></nz-input>
|
</div>
|
</div>
|
<div nz-form-item nz-row>
|
<div nz-form-label nz-col [nzSm]="4">
|
<label>Checkboxes and radios</label>
|
</div>
|
<div nz-form-control nz-col [nzSm]="20">
|
<label nz-checkbox>
|
<span>Checkbox</span>
|
</label>
|
<nz-radio-group>
|
<label nz-radio [nzValue]="'A'">
|
<span>Radio A</span>
|
</label>
|
<label nz-radio [nzValue]="'B'">
|
<span>Radio B</span>
|
</label>
|
</nz-radio-group>
|
</div>
|
</div>
|
<div nz-form-item nz-row>
|
<div nz-form-label nz-col [nzSm]="4">
|
<label>Horizontal Checkboxes and radios</label>
|
</div>
|
<div nz-form-control nz-col [nzSm]="20">
|
<div class="d-block">
|
<label nz-checkbox>
|
<span>Checkbox</span>
|
</label>
|
</div>
|
<nz-radio-group>
|
<label nz-radio [nzValue]="'A'" class="d-block">
|
<span>Radio A</span>
|
</label>
|
<label nz-radio [nzValue]="'B'" class="d-block">
|
<span>Radio B</span>
|
</label>
|
</nz-radio-group>
|
</div>
|
</div>
|
<div nz-form-item nz-row>
|
<div nz-form-label nz-col [nzSm]="4">
|
<label>Select</label>
|
</div>
|
<div nz-form-control nz-col [nzSm]="20">
|
<nz-select [(ngModel)]="selectValue" name="selectValue" nzAllowClear>
|
<nz-option
|
*ngFor="let option of options"
|
[nzLabel]="option.label"
|
[nzValue]="option"
|
[nzDisabled]="option.disabled">
|
</nz-option>
|
</nz-select>
|
</div>
|
</div>
|
<div nz-form-item nz-row>
|
<div nz-form-label nz-col [nzSm]="4">
|
<label>Select[multiple]</label>
|
</div>
|
<div nz-form-control nz-col [nzSm]="20">
|
<nz-select [nzMode]="'multiple'" nzAllowClear>
|
<nz-option
|
*ngFor="let option of options"
|
[nzLabel]="option.label"
|
[nzValue]="option">
|
</nz-option>
|
</nz-select>
|
</div>
|
</div>
|
<div nz-form-item nz-row>
|
<div nz-form-label nz-col [nzSm]="4">
|
<label>cascader</label>
|
</div>
|
<div nz-form-control nz-col [nzSm]="20">
|
<nz-cascader
|
[(ngModel)]="cityValue" name="city"
|
[nzExpandTrigger]="'hover'"
|
[nzOptions]="cities"
|
(ngModelChange)="changeCity($event)"
|
(nzChange)="changeCity($event)"></nz-cascader>
|
</div>
|
</div>
|
<div nz-form-item nz-row>
|
<div nz-form-label nz-col [nzSm]="4">
|
<label>DatePicker</label>
|
</div>
|
<div nz-form-control nz-col [nzSm]="20">
|
<nz-datepicker></nz-datepicker>
|
</div>
|
</div>
|
<div nz-form-item nz-row>
|
<div nz-form-label nz-col [nzSm]="4">
|
<label>TimePicker</label>
|
</div>
|
<div nz-form-control nz-col [nzSm]="20">
|
<nz-timepicker></nz-timepicker>
|
</div>
|
</div>
|
<div nz-form-item nz-row>
|
<div nz-form-label nz-col [nzSm]="4">
|
<label>InputNumber</label>
|
</div>
|
<div nz-form-control nz-col [nzSm]="20">
|
<nz-input-number [nzMax]="10" [nzMin]="1"></nz-input-number>
|
</div>
|
</div>
|
<div nz-form-item nz-row>
|
<div nz-form-label nz-col [nzSm]="4">
|
<label>Switch</label>
|
</div>
|
<div nz-form-control nz-col [nzSm]="20">
|
<nz-switch [nzSize]="'large'" class="mr-sm"></nz-switch>
|
<nz-switch class="mr-sm"></nz-switch>
|
<nz-switch [nzSize]="'small'"></nz-switch>
|
</div>
|
</div>
|
<div nz-form-item nz-row>
|
<div nz-form-label nz-col [nzSm]="4">
|
<label>Slider</label>
|
</div>
|
<div nz-form-control nz-col [nzSm]="8">
|
<nz-slider [nzMarks]="marks"></nz-slider>
|
</div>
|
</div>
|
<div nz-form-item nz-row>
|
<div nz-form-label nz-col [nzSm]="4">
|
<label>Rate</label>
|
</div>
|
<div nz-form-control nz-col [nzSm]="20">
|
<nz-rate [(ngModel)]="rate" name="rate" nzAllowHalf></nz-rate>
|
<span class="ant-rate-text">{{rate}} 星</span>
|
</div>
|
</div>
|
<div nz-form-item nz-row>
|
<div nz-form-label nz-col [nzSm]="4">
|
<label>Tag</label>
|
</div>
|
<div nz-form-control nz-col [nzSm]="20">
|
<nz-tag [nzColor]="'pink'">pink</nz-tag>
|
<nz-tag [nzColor]="'red'">red</nz-tag>
|
<nz-tag [nzColor]="'orange'">orange</nz-tag>
|
<nz-tag [nzColor]="'green'">green</nz-tag>
|
<nz-tag [nzColor]="'cyan'" [nzClosable]="true">cyan</nz-tag>
|
<nz-tag [nzColor]="'blue'" [nzClosable]="true">blue</nz-tag>
|
<nz-tag [nzColor]="'purple'" [nzClosable]="true">purple</nz-tag>
|
</div>
|
</div>
|
<div nz-form-item nz-row>
|
<div nz-form-label nz-col [nzSm]="4">
|
<label>Categories Tag</label>
|
</div>
|
<div nz-form-control nz-col [nzSm]="20">
|
<nz-checkable-tag *ngFor="let tag of hotTags"
|
[nzChecked]="selectedTags.indexOf(tag) > -1"
|
(nzChange)="handleChange($event, tag)">
|
{{tag}}
|
</nz-checkable-tag>
|
</div>
|
</div>
|
<div nz-form-item nz-row>
|
<div nz-form-label nz-col [nzSm]="4">
|
<label>Control sizing</label>
|
</div>
|
<div nz-form-control nz-col [nzSm]="20">
|
<nz-input [nzPlaceHolder]="'large size'" [nzSize]="'large'"></nz-input>
|
<nz-input [nzPlaceHolder]="'default size'"></nz-input>
|
<nz-input [nzPlaceHolder]="'small size'" [nzSize]="'small'"></nz-input>
|
</div>
|
</div>
|
<div nz-form-item nz-row [nzGutter]="8">
|
<div nz-form-label nz-col [nzSm]="4">
|
<label>Column sizing</label>
|
</div>
|
<div nz-form-control nz-col [nzSm]="4">
|
<nz-input [nzPlaceHolder]="'nzSm=4'"></nz-input>
|
</div>
|
<div nz-form-control nz-col [nzSm]="6">
|
<nz-input [nzPlaceHolder]="'nzSm=6'"></nz-input>
|
</div>
|
<div nz-form-control nz-col [nzSm]="10">
|
<nz-input [nzPlaceHolder]="'nzSm=10'"></nz-input>
|
</div>
|
</div>
|
<div nz-form-item nz-row>
|
<div nz-form-label nz-col [nzSm]="4">
|
<label>radio button style</label>
|
</div>
|
<div nz-form-control nz-col [nzSm]="20">
|
<nz-radio-group>
|
<label nz-radio-button [nzValue]="'A'">
|
<span>Hangzhou</span>
|
</label>
|
<label nz-radio-button [nzValue]="'B'">
|
<span>Shanghai</span>
|
</label>
|
<label nz-radio-button [nzValue]="'C'">
|
<span>Beijing</span>
|
</label>
|
<label nz-radio-button [nzValue]="'D'">
|
<span>Chengdu</span>
|
</label>
|
</nz-radio-group>
|
<div class="mt-sm">
|
<nz-radio-group>
|
<label nz-radio-button [nzValue]="'A'">
|
<span>Hangzhou</span>
|
</label>
|
<label nz-radio-button [nzValue]="'B'" [nzDisabled]="true">
|
<span>Shanghai</span>
|
</label>
|
<label nz-radio-button [nzValue]="'C'">
|
<span>Beijing</span>
|
</label>
|
<label nz-radio-button [nzValue]="'D'">
|
<span>Chengdu</span>
|
</label>
|
</nz-radio-group>
|
</div>
|
<div class="mt-sm">
|
<nz-radio-group [nzSize]="'small'">
|
<label nz-radio-button [nzValue]="'A'" [nzDisabled]="true">
|
<span>Hangzhou</span>
|
</label>
|
<label nz-radio-button [nzValue]="'B'" [nzDisabled]="true">
|
<span>Shanghai</span>
|
</label>
|
<label nz-radio-button [nzValue]="'C'" [nzDisabled]="true">
|
<span>Beijing</span>
|
</label>
|
<label nz-radio-button [nzValue]="'D'" [nzDisabled]="true">
|
<span>Chengdu</span>
|
</label>
|
</nz-radio-group>
|
</div>
|
</div>
|
</div>
|
<div nz-form-item nz-row>
|
<div nz-form-label nz-col [nzSm]="4">
|
<label>Success</label>
|
</div>
|
<div nz-form-control nz-col [nzSm]="20" [nzValidateStatus]="'success'" nzHasFeedback>
|
<nz-input></nz-input>
|
</div>
|
</div>
|
<div nz-form-item nz-row>
|
<div nz-form-label nz-col [nzSm]="4">
|
<label>Fail</label>
|
</div>
|
<div nz-form-control nz-col [nzSm]="20" [nzValidateStatus]="'error'" nzHasFeedback>
|
<nz-input></nz-input>
|
<div nz-form-explain>Should be combination of numbers & alphabets</div>
|
</div>
|
</div>
|
<div nz-form-item nz-row>
|
<div nz-form-label nz-col [nzSm]="4">
|
<label>Warning</label>
|
</div>
|
<div nz-form-control nz-col [nzSm]="20" [nzValidateStatus]="'warning'" nzHasFeedback>
|
<nz-input></nz-input>
|
</div>
|
</div>
|
<div nz-form-item nz-row>
|
<div nz-form-label nz-col [nzSm]="4">
|
<label>Validating</label>
|
</div>
|
<div nz-form-control nz-col [nzSm]="20" [nzValidateStatus]="'validating'" nzHasFeedback>
|
<nz-input></nz-input>
|
<div nz-form-explain>I'm the content is being validating</div>
|
</div>
|
</div>
|
</form>
|
</nz-card>
|
</div>
|
</div>
|
