Question

我正在使用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>

Angular 2 FormBuilder组多个验证器

0 个答案: