angular - Angular 2 FormBuilder Group多个验证器
问题描述
我正在使用 Angular 2 FormBuilder。当我尝试像这样分配两个验证时,我正在尝试使用多个验证器来验证用户名和密码是否匹配:
buildForm(): void {
this.step1Form = this.fb.group({
username: new FormControl('', {
validators: [Validators.required,
Validators.minLength(4)],
}),
email: new FormControl('', {
validators: [Validators.required,
Validators.pattern("^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$")],
}),
password: new FormControl('', {
validators: [Validators.required,
Validators.minLength(8)],
}),
repeat: new FormControl('', {
validators: [Validators.required,
Validators.minLength(8)],
}),
}, { validator: this.passwordMatchValidator, asyncValidator: this.checkUsername.bind(this)});
}
但是当我运行这段代码时,我在填写完表格后收到错误消息:
期望验证器返回 Promise 或 Observable。
passwordMatchValidator(g: FormGroup) {
return g.get('password').value === g.get('repeat').value ? null : {'mismatch': true};
}
checkUsername(g: FormGroup) {
this.dataService.checkUsername(g.get('username').value).subscribe(data => {
return typeof data["error"] != 'undefined' ? null : {'mismatch': true};
});
}
我究竟做错了什么?
这是我的 HTML:
<form [formGroup]="step1Form">
<div class="info" *ngIf="username_already">
<i class="fa fa-info-circle"></i>The username is already in use
</div>
<div class="form-group">
<span class="icon"><i class="far fa-user"></i></span>
<input [(ngModel)]="patient.patient_username" formControlName="username" type="text" maxlength="9" class="form-control control-icon" placeholder="Username">
<div *ngIf="errors.username" class="error">{{ errors.username }}</div>
</div>
<div class="form-group">
<span class="icon"><i class="fa fa-envelope"></i></span>
<input [(ngModel)]="patient.email" formControlName="email" type="text" class="form-control control-icon" placeholder="Your email">
<div *ngIf="errors.email" class="error">{{ errors.email }}</div>
</div>
<div class="form-group">
<span class="icon"><i class="fa fa-key"></i></span>
<input [(ngModel)]="patient.password" formControlName="password" type="password" class="form-control control-icon" placeholder="Password">
<div *ngIf="errors.password" class="error">{{ errors.password }}</div>
</div>
<div class="form-group">
<span class="icon"><i class="fa fa-key"></i></span>
<input formControlName="repeat" type="password" class="form-control control-icon" placeholder="Repeat password">
<div *ngIf="errors.repeat" class="error">{{ errors.repeat }}</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</form>
解决方案
推荐阅读
- c# - C# Dropbox 同步状态
- java - 如何将 lambda 函数代码导入 eclipse
- sql - 从 Select 语句创建一个新列,然后在一个过程中将其与另一个 Select 语句组合以返回一个数据表
- java - Java 中线程的替代方案
- java - 上传 PDF 文件并将其作为 InputStream 变量从支持 bean 进行管理
- c++ - 过早释放堆栈帧?
- node.js - 对于不同格式(文本、图像、音频、视频)的一般内容,我的 MongoDB 模式应该如何构建?
- python - PySide6 在组合框更改时检查组合框的更改
- git - 从本地推送、删除和再次推送后,您是否将所有文件保留在 GitHub 上?
- java - PropertyEditorManager - 如何为枚举注册备用编辑器?