FormGroup 的使用
这是一个注册表单，
export class RegisterComponent {
public registerForm = this.fb.group({
name: ['', Validators.required],
email: ['', [Validators.required, Validators.email]],
password: ['', [Validators.required, passwordValidator]],
confirm_password: ['', [Validators.required]],
agree: [false, Validators.requiredTrue]
}, {
validators: confirmValidator()
});
constructor(
private fb: FormBuilder
) { }
get email() {
return this.registerForm.get('email');
}
get password() {
return this.registerForm.get('password');
}
}1234567891011121314151617181920212223
通过 [formGroup] 绑定表单数据源
通过 formControlName 绑定表单项
<form class="form-ico login-form" [formGroup]="registerForm" (ngSubmit)="tapSignUp()">
<div class="input-group">
<input type="text" formControlName="name" placeholder="请输入昵称" required="">
<i class="iconfont icon-user" aria-hidden="true"></i>
</div>
<div class="input-group" [class]="{error: email.invalid}">
<input type="email" formControlName="email" placeholder="请输入邮箱" required="">
<i class="iconfont icon-at" aria-hidden="true"></i>
</div>
<div class="input-group" [class]="{error: password.invalid}">
<input type="password" formControlName="password" placeholder="请输入密码" required="">
<i class="iconfont icon-lock" aria-hidden="true"></i>
</div>
<div class="input-group" [class]="{error: registerForm.errors && registerForm.errors.confirm}">
<input type="password" formControlName="confirm_password" placeholder="请确认密码" required="">
<i class="iconfont icon-check" aria-hidden="true"></i>
</div>
<div class="input-group">
<div class="checkbox">
<input type="checkbox" formControlName="agree" value="1" id="checkboxInput">
<label for="checkboxInput"></label>
</div>
同意《
<a href="https://zodream.cn/agreement">本站协议</a>
》
</div>
<button type="submit" class="btn" [disabled]="registerForm.invalid">注册</button>
<div class="other-box">
<a routerLink="../">返回登录</a>
</div>
</form>12345678910111213141516171819202122232425262728293031323334
获取错误信息
AbstractControl.invalid 获取是否有误
AbstractControl.errors. 获取具体错误信息，注意 .errors 有可能为 undefined 需要先判断
在这里，自定义了两个验证器：
密码验证
passwordValidator可以验证密码的复杂程度。
export const passwordValidator: ValidatorFn = (control: AbstractControl): ValidationErrors | null => {
return control.value && control.value.length < 6 ? {
password_simple: true
} : null;
};12345
确认密码验证
confirmValidator可以验证确认密码是否一致
export const confirmValidator = (key: string = 'password', confirmKey: string = 'confirm_password'): ValidatorFn => {
return (control: FormGroup): ValidationErrors | null => {
return control.get(key).value !== control.get(confirmKey).value ? {
confirm : true
} : null;
};
};1234567
1). 接受两个参数，为需要比较的两个字段名，
2). 必须放在 FormGroup 上，不然获取不到两个值。
3). 通过 FormGroup.errors && FormGroup.errors.confirm 获取有误信息
转载请保留原文链接： https://zodream.cn/blog/id/148.html