Angular自定义验证程序指令问题

时间:2018-06-01 02:17:58

标签: javascript angular typescript angular-directive angular-validation

我的自定义指令遇到了一些问题,但由于某些原因它似乎没有注册。我已将以下自定义指令添加到app.module的declarations数组中。所以我想它一定是我仍然缺少的东西。

另外,有趣的是,如果我form.addControl('name', new FormControl('', [noWhitespaceValidator()]));,那么验证工作正常,但当我切换到使用自定义属性[myNoWhitespace]时,它会失败。我怀疑这是否真的是由于在这种情况下使用Reactive From方法造成的,但我不太确定。

@Directive({
    selector: '[myNoWhitespace]',
    providers: [{ provide: NG_VALIDATORS, useExisting: NoWhitespaceDirective, multi: true }]
})
export class NoWhitespaceDirective implements Validator {
    validator: ValidatorFn;

    constructor() {
        this.validator = noWhitespaceValidator();
    }

    validate(control: AbstractControl) {
        return this.validator(control);
    }
}

export function noWhitespaceValidator(): ValidatorFn {
    return (control: AbstractControl): { [key: string]: any } => {
        const isWhitespace = (control.value || '').trim().length === 0;
        return !isWhitespace ? null : { 'whitespace': '' };
    };
}

<input type="text" id="name" formControlName="name" name="name" myNoWhitespace>

0 个答案:

没有答案