Form 表单

具有数据收集、校验和提交功能的表单,包含复选框、单选框、输入框、下拉选择框等元素。

建议使用前对Angular 4的表单使用方式 有所了解

注:使用 ReactiveForm 需要首先引入 ReactiveFormsModule

当使用 响应式表单(Reactive Form) 时,将<nz-form-control>nzValidateStatus 属性定义为formControlName的输入

这样nzValidateStatus会自动根据表单校验函数返回的结果显示对应的error | validating(pending) | warning | success状态

另外为输入框添加反馈图标,添加 <nz-form-control>nzHasFeedback 的属性即可。

注意: 反馈图标只对 <nz-input/> 有效。

表单

我们为 nz-form 提供了以下三种排列方式:

  • 水平排列:标签和表单控件水平排列;(默认)

  • 垂直排列:标签和表单控件上下垂直排列;

  • 行内排列:表单项水平行内排列。

表单域

表单一定会包含表单域,表单域可以是输入控件,标准表单域,标签,下拉菜单,文本域等。

这里我们封装了表单域 <nz-form-item/>

注:标准表单中一律使用大号控件。

代码演示

水平登录栏,常用在顶部导航栏中。

普通的登录框,可以容纳更多的元素。

用户填写必须的信息以注册新用户。

三列栅格式的表单排列方式,常用于数据表格的高级搜索。

有部分定制的样式代码,由于输入标签长度不确定,需要根据具体情况自行调整。

动态增加、减少表单项。

表单有三种布局

我们为表单控件定义了三种校验状态,你可以不使用Reactive Form的异步返回数据,而直接定义表单的返回状态,定义<nz-form-control>nzValidateStatus 输入即可。

nzValidateStatus可选择状态有'success', 'warning', 'error', 'validating'四种。

另外为输入框添加反馈图标,添加 <nz-form-control>nzHasFeedback 属性即可。

注意: 反馈图标只对 <nz-input/> 有效。

当使用 响应式表单(Reactive Form) 时,将<nz-form-control>nzValidateStatus 属性定义为当前formControlName名称,

组件将表单校验函数的校验过程和异步返回的结果显示对应的error | validating(pending) | warning | success状态,具体使用方式建议参照本demo

另外为输入框添加反馈图标,添加 <nz-form-control>nzHasFeedback 属性即可。

注意: 反馈图标只对 <nz-input /> 有效。

以上演示没有出现的表单控件对应的校验演示。

API

form表单组件的核心基于Angular的form表单规则,建议先了解相关内容

[nz-form]

[nz-form]作为原生form的增强,用于加强form的样式

参数 说明 类型 默认值
nzLayout 表单布局 'horizontal'|'vertical'|'inline' 'horizontal'

[nz-form-control]

标定表单控制区域,通常用于放置input,select等组件

参数 说明 类型 默认值
nzHasFeedback 当添加该属性时,配合 nzValidateStatus 属性使用,展示校验状态图标,建议只配合 nz-input 组件使用 attribute -
nzValidateStatus 校验状态,属性定义为当前formControl名称可以根据异步返回数据自动显示,也可手动定义 可选:'success' 'warning' 'error' 'validating' formControl|string -

[nz-form-item]

用于标定一个form item区域

[nz-form-label]

用于标定label区域

[nz-form-item-required]

给label添加require样式

[nz-form-explain]

用于显示提示信息,会根据当前nzValidateStatus显示不同的颜色

[nz-form-extra]

用于显示表单额外提示信息

[nz-form-split]

用于显示 -分隔符