- 在组件中导入所需的模块和服务:
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { MatSnackBar } from '@angular/material/snack-bar';
- 声明表单和表单控件的验证规则:
myForm: FormGroup;
constructor(private fb: FormBuilder, private snackBar: MatSnackBar) {
this.myForm = this.fb.group({
username: ['', [Validators.required, Validators.minLength(4)]],
email: ['', [Validators.required, Validators.email]],
password: ['', [Validators.required, Validators.minLength(8)]],
confirmPwd: ['', [Validators.required]]
}, {validator: this.checkPasswords});
}
checkPasswords(group: FormGroup): any {
let pass = group.controls.password.value;
let confirmPass = group.controls.confirmPwd.value;
return pass === confirmPass ? null : { notSame: true };
}
- 在模板里绑定表单控件和相应的错误信息提示: