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]});}}