# 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]

用于显示 `-`分隔符