ng-zorro - angular UI中 Form表单

Form表单

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

需要与Angular表单结合使用，可自由选择 响应式表单或模板驱动表单。

表单

提供了三种排列方式：

• 水平排列：标签和表单控件水平排列；（默认）
• 垂直排列：标签和表单控件上下垂直排列；
• 行内排列：表单项水平内排列。

表单项nz-form-item

表单项用于区分表单中不同的区域，包含表单域和表单标签（可选）。
所有nz-col的参数在nz-form-item上均可直接使用。

表单标签nz-form-label

用于标示当前表单项的内容，可选。
所有nz-col的参数在nz-form-label上均可直接使用。

表单域nz-form-control

表单一定会包含表单域，表单域可以是输入控件，标准表单域，标签，下拉菜单，文本域等。
所有nz-col的参数在nz-form-control上均可直接使用。

<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';

例：内联登录栏

当Username和Password没有填写的状态下log in按钮禁止点击状态，

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'nz-demo-form-horizontal-login',
  template: `
    <form nz-form [nzLayout]="'inline'" [formGroup]="validateForm" (ngSubmit)="submitForm()">
      <nz-form-item>
        <nz-form-control nzErrorTip="Please input your username!">
          <nz-input-group nzPrefixIcon="user">
            <input formControlName="userName" nz-input placeholder="Username" />
          </nz-input-group>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-control nzErrorTip="Please input your Password!">
          <nz-input-group nzPrefixIcon="lock">
            <input formControlName="password" nz-input type="password" placeholder="Password" />
          </nz-input-group>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-control>
          <button nz-button nzType="primary" [disabled]="!validateForm.valid">Log in</button>
        </nz-form-control>
      </nz-form-item>
    </form>
  `
})
export class NzDemoFormHorizontalLoginComponent implements OnInit {
  validateForm!: FormGroup;

  submitForm(): void {
    for (const i in this.validateForm.controls) {
      this.validateForm.controls[i].markAsDirty();
      this.validateForm.controls[i].updateValueAndValidity();
    }
  }

  constructor(private fb: FormBuilder) {}

  ngOnInit(): void {
    this.validateForm = this.fb.group({
      userName: [null, [Validators.required]],
      password: [null, [Validators.required]],
      remember: [true]
    });
  }
}