Angular提供了两种表单校验方式：模板驱动表单和响应式表单。两者都支持内置验证器和自定义验证器。
一、模板校验
angular 自身提供了强大的表单校验功能
- valid: 显示该字段是否通过了所有验证规则。
- invalid: 显示该字段是否未通过验证规则。
- dirty: 显示用户是否修改过该字段的值。
- touched: 显示用户是否访问过该字段（例如点击或聚焦后离开）。
- errors: 显示当前验证失败的具体错误信息，使用json管道格式化输出
<form #form="ngForm" (ngSubmit)="onSubmit(form)">
<div>
<label for="name">用户名:</label>
<input type="text"
id="name"
[(ngModel)]="user.name"
name="name"
required
minlength="4"
#name="ngModel"
pattern="[a-zA-Z0-9]+"
>
<p>valid:{{name.valid}}</p>
<p>invalid:{{name.invalid}}</p>
<p>dirty:{{name.dirty}}</p>
<p>touched:{{name.touched}}</p>
<p>errors:{{name.errors | json}}</p>
</div>
<div>
<label for="password">密码:</label>
<input type="password"
id="password"
[(ngModel)]="user.password"
name="password"
required
minlength="6"
#password="ngModel"
pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d@$!%*?&]{6,}$"
>
<p>valid:{{password.valid}}</p>
<p>invalid:{{password.invalid}}</p>
<p>dirty:{{password.dirty}}</p>
<p>touched:{{password.touched}}</p>
<p>errors:{{password.errors | json}}</p>
</div>
<button type="submit" [disabled]="!form.form.valid">提交</button>
</form>
二、响应式表单
1. 首先在 app.module.ts中引入FormsModule,ReactiveFormsModule
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule,ReactiveFormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AppHelloFormComponent } from './app-hello-form/app-hello-form.component';
@NgModule({
declarations: [
AppComponent,
AppHelloFormComponent,
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule,
ReactiveFormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
2.在组件模板中
<form [formGroup]="myGroup" (ngSubmit)="onSubmit()">
<input type="text" name="name" formControlName="name">
<input type="text" name="password" formControlName="password">
<button type="submit" [disabled]="!myGroup.valid">提交</button>
</form>
3.在component中
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
@Component({
selector: 'app-app-hello-form',
templateUrl: './app-hello-form.component.html',
styleUrls: ['./app-hello-form.component.less']
})
export class AppHelloFormComponent implements OnInit {
myGroup: FormGroup = new FormGroup({});
user = {
name: '',
password: ''
}
constructor() {
}
ngOnInit(): void {
this.myGroup = new FormGroup(
{
'name': new FormControl(this.user.name, [Validators.required, Validators.minLength(4)]),
'password': new FormControl(this.user.password, [Validators.required, ]),
}
)
}
get name(){
return this.myGroup.get('name');
}
get password(){
return this.myGroup.get('password')
}
onSubmit() {
console.log(this.myGroup.valid);
console.log(this.name)
console.log(this.myGroup.value)
}
}
三、FormBuilder
借助FormBuilder 可以更加方便的表单校验
<form [formGroup]="userForm" (ngSubmit)="onSubmit()">
<input type="text" name="name" formControlName="name">
<input type="text" name="password" formControlName="password">
<button type="submit" [disabled]="!userForm.valid">提交</button>
</form>
import { Component, OnInit } from '@angular/core';
import {FormBuilder, FormGroup, FormControl, Validators} from '@angular/forms';
@Component({
selector: 'app-hello-formbuilder',
templateUrl: './hello-formbuilder.component.html',
styleUrls: ['./hello-formbuilder.component.less']
})
export class HelloFormbuilderComponent implements OnInit {
userForm: FormGroup;
constructor(private fb: FormBuilder) {
this.userForm= this.fb.group({
name:['11',Validators.required],
password:['111111',Validators.required],
})
}
ngOnInit(): void {
}
onSubmit(){
}
}
