ng-ytl-zorro-antd/src/showcase/nz-demo-form/nz-demo-form.html

An enterprise-class UI components based on Ant Design and Angular

<article>
  <section class="markdown">
    <h1>Form 表单</h1>
    <section class="markdown">
      <p>具有数据收集、校验和提交功能的表单，包含复选框、单选框、输入框、下拉选择框等元素。</p>
      <p>建议使用前对Angular 4的表单使用方式
        <a href="https://v2.angular.cn/docs/ts/latest/guide/forms.html" target="_blank">有所了解</a>
      </p>
      <blockquote><p>注：使用 ReactiveForm 需要首先引入 ReactiveFormsModule </p></blockquote>
      <p>当使用
        <a href="https://v2.angular.cn/docs/ts/latest/cookbook/form-validation.html#!#reactive" target="_blank">响应式表单(Reactive Form)</a>
        时，将<code>&lt;nz-form-control&gt;</code>的<code>nzValidateStatus</code> 属性定义为<code>formControlName</code>的输入
      </p>
      <p>这样<code>nzValidateStatus</code>会自动根据表单校验函数返回的结果显示对应的<code>error | validating(pending) | warning | success</code>状态
      </p>
      <p>另外为输入框添加反馈图标，添加 <code>&lt;nz-form-control&gt;</code> 的 <code>nzHasFeedback</code> 的属性即可。</p>
      <p><strong>注意</strong>: 反馈图标只对 <code>&lt;nz-input/&gt;</code> 有效。</p>
      <h2 id="表单"><span>表单</span>
        <!-- <a class="anchor">#</a> -->
      </h2>
      <p>我们为 <code>nz-form</code> 提供了以下三种排列方式：
      </p>
      <ul>
        <li>
          <p>水平排列：标签和表单控件水平排列；（默认）
          </p></li>
        <li>
          <p>垂直排列：标签和表单控件上下垂直排列；
          </p></li>
        <li>
          <p>行内排列：表单项水平行内排列。
          </p></li>
      </ul>
      <h2 id="表单域"><span>表单域</span>
        <!-- <a class="anchor">#</a> -->
      </h2>
      <p>表单一定会包含表单域，表单域可以是输入控件，标准表单域，标签，下拉菜单，文本域等。</p>
      <p>这里我们封装了表单域 <code>&lt;nz-form-item/&gt;</code> 。
      </p>
      <blockquote><p>注：标准表单中一律使用大号控件。</p></blockquote>
    </section>
    <h2>代码演示<i class="code-box-expand-trigger anticon anticon-appstore" title="展开全部代码"></i></h2>
  </section>
  <div nz-row [nzGutter]="8">
    <div nz-col [nzSpan]="24">
      <nz-code-box [nzTitle]="'水平登录栏'" id="components-form-demo-inline" [nzCode]="NzDemoFormInlineCode">
        <nz-demo-form-inline demo></nz-demo-form-inline>
        <div intro>
          <p>水平登录栏，常用在顶部导航栏中。</p>
        </div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'登录框'" id="components-form-demo-login" [nzCode]="NzDemoFormLoginCode">
        <nz-demo-form-login demo></nz-demo-form-login>
        <div intro>
          <p>普通的登录框，可以容纳更多的元素。</p>
        </div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'注册新用户'" id="components-form-demo-horizontal" [nzCode]="NzDemoFormHorizontalCode">
        <nz-demo-form-horizontal demo></nz-demo-form-horizontal>
        <div intro>
          <p>用户填写必须的信息以注册新用户。</p>
        </div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'高级搜索'" id="components-form-demo-advanced" [nzCode]="NzDemoFormAdvancedCode">
        <nz-demo-form-advanced demo></nz-demo-form-advanced>
        <div intro>
          <p>三列栅格式的表单排列方式，常用于数据表格的高级搜索。</p>
          <p>有部分定制的样式代码，由于输入标签长度不确定，需要根据具体情况自行调整。</p>
        </div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'动态增减表单项'" id="components-form-demo-dynamic" [nzCode]="NzDemoFormDynamicCode">
        <nz-demo-form-dynamic demo></nz-demo-form-dynamic>
        <div intro>
          <p>动态增加、减少表单项。</p>
        </div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'表单布局'" id="components-form-demo-layout" [nzCode]="NzDemoFormLayoutCode">
        <nz-demo-form-layout demo></nz-demo-form-layout>
        <div intro>
          <p>表单有三种布局</p>
        </div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'自定义同步校验'" id="components-form-demo-validate" [nzCode]="NzDemoFormValidateCode">
        <nz-demo-form-validate demo></nz-demo-form-validate>
        <div intro>
          <p>我们为表单控件定义了三种校验状态，你可以不使用<code>Reactive Form</code>的异步返回数据，而直接定义表单的返回状态，定义<code>&lt;nz-form-control&gt;</code>的<code>nzValidateStatus</code> 输入即可。
          </p>
          <p> <code>nzValidateStatus</code> 可选择状态有'success', 'warning', 'error', 'validating'四种。</p>
          <p>另外为输入框添加反馈图标，添加 <code>&lt;nz-form-control&gt;</code> 的 <code>nzHasFeedback</code> 属性即可。</p>
          <p><strong>注意</strong>: 反馈图标只对 <code>&lt;nz-input/&gt;</code> 有效。</p>
        </div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'自定义异步校验'" id="components-form-demo-validate-dynamic" [nzCode]="NzDemoFormValidateDynamicCode">
        <nz-demo-form-validate-dynamic demo></nz-demo-form-validate-dynamic>
        <div intro>
          <div intro>
            <p>当使用
              <a href="https://v2.angular.cn/docs/ts/latest/cookbook/form-validation.html#!#reactive">响应式表单(Reactive Form)</a>
              时，<code>&lt;nz-form-control&gt;</code> 的 <code>nzValidateStatus</code> 会自动从 <code>NgControl</code> 中获取数据，也可以手动指定特定的 <code>NgControl</code>
            </p>
            <p>组件将表单校验函数的校验过程和异步返回的结果显示对应的<code>error | validating(pending) | warning | success</code>状态，具体使用方式建议参照本demo
            </p>
            <p>另外为输入框添加反馈图标，添加 <code>&lt;nz-form-control&gt;</code> 的
              <code>nzHasFeedback</code> 属性即可。</p>
            <p><strong>注意</strong>: 反馈图标只对 <code>&lt;nz-input /&gt;</code> 有效。</p>
          </div>
        </div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'校验其他组件'" id="components-form-demo-mix" [nzCode]="NzDemoFormMixCode">
        <nz-demo-form-mix demo></nz-demo-form-mix>
        <div intro>
          <p>以上演示没有出现的表单控件对应的校验演示。</p>
        </div>
      </nz-code-box>
    </div>
  </div>
  <section class="markdown api-container">
    <h2 id="API">
      <span>API</span>
      <!-- <a class="anchor">#</a> -->
    </h2>
    <p>
      form表单组件的核心基于Angular的form表单规则，建议先了解<a href="https://v2.angular.cn/docs/ts/latest/guide/forms.html" target="_blank">相关内容</a>
    </p>
    <h3>
      <span>[nz-form]</span>
      <!-- <a class="anchor">#</a> -->
    </h3>
    <p>[nz-form]作为原生form的增强，用于加强form的样式</p>
    <table>
      <thead>
        <tr>
          <th>参数</th>
          <th>说明</th>
          <th>类型</th>
          <th>默认值</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>nzLayout</td>
          <td>表单布局</td>
          <td>'horizontal'|'vertical'|'inline'</td>
          <td>'horizontal'</td>
        </tr>
      </tbody>
    </table>
    <h3><span>[nz-form-control]</span><!-- <a class="anchor">#</a> --></h3>
    <p>标定表单控制区域，通常用于放置input，select等组件</p>
    <table>
      <thead>
        <tr>
          <th>参数</th>
          <th>说明</th>
          <th>类型</th>
          <th>默认值</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>nzHasFeedback</td>
          <td>当添加该属性时，配合 nzValidateStatus 属性使用，展示校验状态图标，建议只配合 nz-input 组件使用</td>
          <td>attribute</td>
          <td>-</td>
        </tr>
        <tr>
          <td>nzValidateStatus</td>
          <td>校验状态，当定义为 <code>NgControl</code> 时可以根据异步返回数据自动显示，也可手动定义为string 可选：'success' 'warning' 'error' 'validating'</td>
          <td>NgControl|string</td>
          <td>-</td>
        </tr>
      </tbody>
    </table>
    <h3><span>[nz-form-item]</span><!-- <a class="anchor">#</a> --></h3>
    <p>用于标定一个form item区域</p>
    <h3><span>[nz-form-label]</span><!-- <a class="anchor">#</a> --></h3>
    <p>用于标定label区域</p>
    <h3><span>[nz-form-item-required]</span><!-- <a class="anchor">#</a> --></h3>
    <p>给label添加require样式</p>
    <h3><span>[nz-form-explain]</span><!-- <a class="anchor">#</a> --></h3>
    <p>用于显示提示信息，会根据当前<code>nzValidateStatus</code>显示不同的颜色</p>
    <h3><span>[nz-form-extra]</span><!-- <a class="anchor">#</a> --></h3>
    <p>用于显示表单额外提示信息</p>
    <h3><span>[nz-form-split]</span><!-- <a class="anchor">#</a> --></h3>
    <p>用于显示 <code>-</code>分隔符</p>
  </section>

</article>