<form nz-form>
  <nz-form-item>
    <nz-form-label [nzSpan]="6" nzFor="email">E-mail</nz-form-label>
    <nz-form-control [nzSpan]="14">
      <input nz-input name="email" type="email" id="email">
    </nz-form-control>
  </nz-form-item >
</form>

import { NzFormModule } from 'ng-zorro-antd/form';

代码演示

注册新用户

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

加载中

Search Result List

高级搜索

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

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

加载中

动态增减表单项

动态增加、减少表单项。

加载中

时间类控件

时间类组件的输入和输出类型均为 Date 类型，可以通过 date-fns 工具库进行进一步的处理。

加载中

响应式表单验证

我们在 nz-form-control 上提供了 nzValidateStatusnzHasFeedback 等属性，当使用响应式表单时，可以自己定义校验的时机和内容。

nzValidateStatus: 校验状态，默认自动从 nz-form-control 中的 NgControl 获得校验状态，也可以手动指定为特定的 NgControl。
nzHasFeedback：用于给输入框添加反馈图标。
nzSuccessTipnzWarningTipnzErrorTipnzValidatingTip：设置不同状态校验文案。

当同一种状态下存在多种提示情况时，nzSuccessTipnzWarningTipnzErrorTipnzValidatingTip 均支持传入 TemplateRef<{ $implicit: FormControl } 类型，可以通过模板变量导出 FormControl 后用于切换不同的提示信息。当 FormControl.status 为 INVALID 并且错误包含 {warning：true} 时，nz-form-control 显示警告状态。

加载中

模板驱动表单验证

当使用模板驱动表单时，模板可以根据模板设定自动进行校验。

nzHasFeedback：用于给输入框添加反馈图标。
nzSuccessTipnzWarningTipnzErrorTipnzValidatingTip：设置不同状态校验文案。

当同一种状态下存在多种提示情况时，nzSuccessTipnzWarningTipnzErrorTipnzValidatingTip 均支持传入 TemplateRef<{ $implicit: NgModel } 类型，可以通过模板变量导出 NgModel 后用于切换不同的提示信息。

加载中

自动提示

让提示变得更简单。
需要预先自定义 Validators 和提供 nzAutoTips，它们优先级如下：

Validators > nzAutoTips
通过 @Input 设置 nzAutoTips
通过全局配置设置 nzAutoTips

另外，你可以使用 nzDisableAutoTips 去禁用它。

使用当前的语言环境(zh-cn,en...)作为 nzAutoTips 的 key 去查找提示，如果没找到会再用 default 查找一次。

加载中

手动指定表单状态

用户可以在通过 nz-form-control 的 nzValidateStatus 属性直接设定表单的状态。

nzValidateStatus: 校验状态，可选 'success', 'warning', 'error', 'validating'。
nzHasFeedback：用于给输入框添加反馈图标。
nzSuccessTipnzWarningTipnzErrorTipnzValidatingTip：设置不同状态校验文案。

加载中

表单联动

使用 setValue 来动态设置其他控件的值。

加载中

表单布局

表单有三种布局。

加载中

动态校验规则

根据不同情况执行不同的校验规则。

加载中

API#

[nz-form]directive#

参数	说明	类型	默认值	全局配置
`[nzLayout]`	表单布局	`'horizontal' \| 'vertical' \| 'inline'`	`'horizontal'`
`[nzAutoTips]`	配置 `nz-form-control` 的 `[nzAutoTips]` 的默认值, 具体用法请参考示例：自动提示	`Record<string, Record<string, string>>`	`{}`	✅
`[nzDisableAutoTips]`	配置 `nz-form-control` 的 `[nzDisableAutoTips]` 的默认值	`boolean`	`false`	✅
`[nzNoColon]`	配置 `nz-form-label` 的 `[nzNoColon]` 的默认值	`boolean`	`false`	✅
`[nzTooltipIcon]`	配置 `nz-form-label` 的 `[nzTooltipIcon]` 的默认值	`string \| { type: string; theme: ThemeType }`	`{ type: 'question-circle', theme: 'outline' }`	✅

nz-form-itemcomponent#

表单项用于区分表单中不同的区域，包含表单域和表单标签(可选)。

所有 nz-row 的参数在 nz-form-item 上均可直接使用。

nz-form-labelcomponent#

用于标示当前表单项的内容，可选。

所有 nz-col 的参数在 nz-form-label 上均可直接使用。

参数	说明	类型	默认值
`[nzRequired]`	当前项是否为必填，仅影响样式	`boolean`	`false`
`[nzNoColon]`	是否不显示 label 后面的冒号	`boolean`	`false`
`[nzFor]`	label 标签的 for 属性	`string`	-
`[nzTooltipTitle]`	配置提示信息	`string \| TemplateRef<void>`	-
`[nzTooltipIcon]`	配置提示信息的图标	`string \| NzFormTooltipIcon`	-

nz-form-controlcomponent#

注意：由于 Angular Form 目前提供的状态变更订阅不完整。手动更改表单状态时，例如 markAsDirty 后，需要执行 updateValueAndValidity 通知 nz-form-control 进行状态变更。

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

所有 nz-col 的参数在 nz-form-control 上均可直接使用。

参数	说明	类型	默认值
`[nzValidateStatus]`	会根据传入的 `FormControl` 或 `NgModel` 自动生成校验状态，也可以直接指定状态，不传入时默认值为 `nz-form-control` 中包裹的第一个 `FormControl` 或 `NgModel`	`'success' \| 'warning' \| 'error' \| 'validating' \| FormControl \| NgModel`	`nz-form-control` 中包裹的第一个 `FormControl` 或 `NgModel`
`[nzHasFeedback]`	配合 `nzValidateStatus` 属性使用，展示校验状态图标	`boolean`	`false`
`[nzExtra]`	用于显示表单额外提示信息	`string \| TemplateRef<void>`	-
`[nzSuccessTip]`	校验状态 success 时提示信息	`string \| TemplateRef<{ $implicit: FormControl \| NgModel }>`	-
`[nzWarningTip]`	校验状态 warning 时提示信息	`string \| TemplateRef<{ $implicit: FormControl \| NgModel }>`	-
`[nzErrorTip]`	校验状态 error 时提示信息	`string \| TemplateRef<{ $implicit: FormControl \| NgModel }>`	-
`[nzValidatingTip]`	正在校验时提示信息	`string \| TemplateRef<{ $implicit: FormControl \| NgModel }>`	-
`[nzAutoTips]`	配置提示的对象, 具体用法请参考示例：自动提示	`Record<string, Record<string, string>>`	-
`[nzDisableAutoTips]`	禁用自动提示	`boolean`	-

nz-form-splitcomponent#

用于显示分隔符 -

nz-form-textcomponent#

在 nz-form-control 中直接显示文本