1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > ng-zorro - angular UI中 Form表单

ng-zorro - angular UI中 Form表单

时间:2024-09-03 16:29:13

相关推荐

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

例:内联登录栏

UsernamePassword没有填写的状态下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]});}}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。