Question

我正在尝试实现一个自定义验证程序，用于检查密钥用户名是否存在。但是，我遇到了控件始终无效的问题。我已经确认webApi正在返回正确的值，验证器函数正在进入正确的return语句。

我的自定义验证器如下：

import { Directive, forwardRef } from '@angular/core';
import { AbstractControl, ValidatorFn, NG_VALIDATORS, Validator, FormControl } from '@angular/forms';
import { UsersService } from '../_services/index';
import { Users } from '../admin/models/users';

function validateUserNameAvailableFactory(userService: UsersService): ValidatorFn {
    return (async (c: AbstractControl) => {
        var user: Users;
        userService.getUserByName(c.value)
            .do(u => user = u)            
            .subscribe(
            data => {
                console.log("User    " + user)
                if (user) {
                    console.log("Username was found");
                    return {
                        usernameAvailable: {
                            valid: false
                        }
                    }
                }
                else {
                    console.log("Username was not found");
                    return null;
                }
            },
            error => {
                console.log("Username was not found");
                return null;
            })            

    })
}

@Directive({
    selector: '[usernameAvailable][ngModel]',
    providers: [
        { provide: NG_VALIDATORS, useExisting: forwardRef(() => UserNameAvailableValidator), multi: true }
    ]
})

export class UserNameAvailableValidator implements Validator {
    validator: ValidatorFn;

    constructor(private usersService: UsersService) {   

    }    

    ngOnInit() {        
        this.validator = validateUserNameAvailableFactory(this.usersService);        
    }

    validate(c: FormControl) {
        console.log(this.validator(c));
        return this.validator(c);
    }
}

表格如下：

<form #userForm="ngForm" (ngSubmit)="onSubmit()" novalidate>
      <div class="form form-group col-md-12">
        <label for="UserName">User Name</label>
        <input type="text" class="form-control" id="UserName"
               required usernameAvailable maxlength="50" 
               name="UserName" [(ngModel)]="user.userName"
               #UserName="ngModel" />
        <div [hidden]="UserName.valid || UserName.pristine" class="alert alert-danger">
          <p *ngIf="UserName.errors.required">Username is required</p>
          <p *ngIf="UserName.errors.usernameAvailable">Username is not available</p>
          <p *ngIf="UserName.errors.maxlength">Username is too long</p>
        </div>
        <!--<div [hidden]="UserName.valid || UserName.pristine" class="alert alert-danger">Username is Required</div>-->        
      </div> 
</form>

我已经遵循了几个教程证明这个结构有效，所以我假设我可能搞乱了验证器函数内的返回。

另外，有没有办法可以提供错误列表（我尝试过使用带有ngFor的li，但我从中得不到任何结果）？

Answer 1

所以，使用.subscribe的方式出现了问题。我通过使用以下2个链接找到了解决方案：

https://netbasal.com/angular-2-forms-create-async-validator-directive-dd3fd026cb45 http://cuppalabs.github.io/tutorials/how-to-implement-angular2-form-validations/

现在，我的验证器看起来像这样：

import { Directive, forwardRef } from '@angular/core';
import { AbstractControl, AsyncValidatorFn, ValidatorFn, NG_VALIDATORS, NG_ASYNC_VALIDATORS, Validator, FormControl } from '@angular/forms';
import { Observable } from "rxjs/Rx";
import { UsersService } from '../_services/index';
import { Users } from '../admin/models/users';

@Directive({
    selector: "[usernameAvailable][ngModel], [usernameAvailable][formControlName]",
    providers: [
        {
            provide: NG_ASYNC_VALIDATORS,
            useExisting: forwardRef(() => UserNameAvailableValidator), multi: true
        }
    ]
})

export class UserNameAvailableValidator implements Validator {

    constructor(private usersService: UsersService) {

    } 

    validate(c: AbstractControl): Promise<{ [key: string]: any }> | Observable<{ [key: string]: any }> {
        return this.validateUserNameAvailableFactory(c.value);
    }

    validateUserNameAvailableFactory(username: string) {
        return new Promise(resolve => {           
            this.usersService.getUserByName(username)
                .subscribe(
                data => {
                    resolve({
                        usernameAvailable: true
                    })
                },
                error => {
                    resolve(null);
                })
        })        
    }
}

现在正在运作。但是，我现在遇到一个问题，即当异步验证器正在运行时，控件会暂时使自身无效。

Answer 2

true的回复应为：

{usernameAvailable: true}

对于null，

或false。

Angular 2自定义验证器（模板表单）验证

2 个答案: