具有数据收集、校验和提交功能的表单,包含复选框、单选框、输入框、下拉选择框等元素。
建议使用前对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
会自动从 NgControl
中获取数据,也可以手动指定特定的 NgControl
组件将表单校验函数的校验过程和异步返回的结果显示对应的error | validating(pending) | warning | success
状态,具体使用方式建议参照本demo
另外为输入框添加反馈图标,添加 <nz-form-control>
的
nzHasFeedback
属性即可。
注意: 反馈图标只对 <nz-input />
有效。
以上演示没有出现的表单控件对应的校验演示。
form表单组件的核心基于Angular的form表单规则,建议先了解相关内容
[nz-form]作为原生form的增强,用于加强form的样式
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
nzLayout | 表单布局 | 'horizontal'|'vertical'|'inline' | 'horizontal' |
标定表单控制区域,通常用于放置input,select等组件
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
nzHasFeedback | 当添加该属性时,配合 nzValidateStatus 属性使用,展示校验状态图标,建议只配合 nz-input 组件使用 | attribute | - |
nzValidateStatus | 校验状态,当定义为 NgControl 时可以根据异步返回数据自动显示,也可手动定义为string 可选:'success' 'warning' 'error' 'validating' |
NgControl|string | - |
用于标定一个form item区域
用于标定label区域
给label添加require样式
用于显示提示信息,会根据当前nzValidateStatus
显示不同的颜色
用于显示表单额外提示信息
用于显示 -
分隔符