注册响应式表单模块
要使用响应式表单控件，就要在app.module.ts文件中，从 @angular/forms 包中导入 [ReactiveFormsModule](https://angular.cn/api/forms/ReactiveFormsModule)，并把它添加到你的 NgModule 的 imports 数组中。
1、组件中引入import { FormControl,FormBuilder,FormGroup, Validators } from '@angular/forms';表单验证模块（FormGroup：表单验证组内部有FormControl，FormBuilder：ts中使用其创建表单对象，Validators：Angular内含的验证模块）
2、在页面中创建表单组件，表单绑定[formGroup]='form'属性；在ts中定义public form!:FormGroup。同时在html页面中需要验证的表单元素中绑定formControlName='username'
<input nz-input type="text" formControlName='username' required placeholder="用户名">
<input nz-input type="text" formControlName='password' placeholder="密码">
3、声明表单初始化函数(两种方法)，在组件的初始化生命周期中进行调用
//初始化表单
initform(){
//使用构造函数方法创建表单对象
// this.form=new FormGroup({
// username:new FormControl('',[Validators.required]),
// password:new FormControl('',[Validators.required])
// })
//使用FormBuilder模块中的group方法创建表单对象
this.form=this.FormBuilder.group({
username:['',[Validators.required,Validators.maxLength(8)]],
password:['',Validators.required]
})
}
4、使用get方法获取两个表单项,方便后面对页面中对提示函数的书写不用多次获取表单的项目
public get username() {
return this.form.get('username')
}
public get password() {
return this.form.get('password')
}
5、定义表单验证不通过提示函数
getErrorMsg(name:any){
switch (name) {
case 'username':
return this.username?.errors?.required?'用户名必填':
this.username?.errors?.maxlength?'用户名不能超过8位':
'';
break;
case 'password':
return this.password?.errors?.required?'密码必填':'';
break;
default:
return false
break;
}
}
6、在页面中想要显示提示错误的地方引用
//username项验证不通过提示
<div [ngStyle]="{'color':'red'}">{{getErrorMsg('username')}}</div>
//password项验证不通过提示
<div [ngStyle]="{'color':'red'}">{{getErrorMsg('password')}}</div>
7、在表单提交事件中对表单验证是否通过进行判断，是否提交表单
functionName(){
if (this.form.valid) {
//通过验证，使用this.form.value获取表单提交的值
console.log(this.form.value);
}else{
//未通过验证，调用内置的提示模块给出提示
for (const i in this.validateForm.controls) {
if (this.validateForm.controls.hasOwnProperty(i)) {
this.validateForm.controls[i].markAsDirty();
this.validateForm.controls[i].updateValueAndValidity();
}
}
}
}
以下为具体代码
//html
<form (ngSubmit)="functionName()" [formGroup]='form'>
<div>
<input nz-input type="text" formControlName='username' required placeholder="用户名">
<div [ngStyle]="{'color':'red'}">{{getErrorMsg('username')}}</div>
</div>
<div>
<input nz-input type="text" formControlName='password' placeholder="密码">
<div [ngStyle]="{'color':'red'}">{{getErrorMsg('password')}}</div>
</div>
<button type="submit">提交</button>
</form>
//ts
import { Component, OnInit } from '@angular/core';
import { FormControl,FormBuilder,FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-form-valid',
templateUrl: './form-valid.component.html',
styleUrls: ['./form-valid.component.scss']
})
export class FormValidComponent implements OnInit {
public form!:FormGroup
constructor(private FormBuilder:FormBuilder) { }
//表单提交
functionName(){
if (this.form.valid) {
//通过验证，使用this.form.value获取表单提交的值
console.log(this.form.value);
}else{
//未通过验证，调用内置的提示模块给出提示
for (const i in this.validateForm.controls) {
if (this.validateForm.controls.hasOwnProperty(i)) {
this.validateForm.controls[i].markAsDirty();
this.validateForm.controls[i].updateValueAndValidity();
}
}
}
}
public get username() {
return this.form.get('username')
}
public get password() {
return this.form.get('password')
}
getErrorMsg(name:any){
switch (name) {
case 'username':
return this.username?.errors?.required?'用户名必填':
this.username?.errors?.maxlength?'用户名不能超过8位':
'';
break;
case 'password':
return this.password?.errors?.required?'密码必填':'';
break;
default:
return false
break;
}
}
//初始化表单
initform(){
// this.form=new FormGroup({
// username:new FormControl('',[Validators.required]),
// password:new FormControl('',[Validators.required])
// })
this.form=this.FormBuilder.group({
username:['',[Validators.required,Validators.maxLength(8)]],
password:['',Validators.required]
})
}
ngOnInit(): void {
this.initform()
}
}
