Angular 表单自定义验证数据

debugcn 发表于 Dev

贸发局

我当前的 Angular 4.4 项目的一部分需要对某些表单字段进行自定义验证。将几个示例拼凑在一起，我创建了一个运行良好的测试验证指令。目前情况如下：

import ...

function validateNameNotChrisFactory(coreDataService: CoreDataService) {

    return (c: FormControl) => {

        let formControlValue = "";
        const nameToCheckFor = "Chris";
        let isValid = false;
        let errorMessage = "Must not be Chris";

        if (c != null) {
            formControlValue = c.value;

            if (c.value != null) {
                console.log("Name entered: " + formControlValue);

                if (formControlValue.indexOf(nameToCheckFor) !== -1) {

                    // The form control's value is INVALID.
                    isValid = false;

                } else {
                    isValid = true;
                };
            };
        };

        const message = {
            'validateNameNotChris': {
                'message': errorMessage
            }
        };

        // If isValid == true then return null, else return message.
        return isValid ? null : message;

    };
};

@Directive({
    selector: '[validateNameNotChris][ngModel],[validateNameNotChris][formControl]',
    providers: [
        {
            provide: NG_VALIDATORS,
            useExisting: forwardRef(() => NameNotChrisValidatorDirective),
            multi: true
        }
    ]
})
export class NameNotChrisValidatorDirective {

    validator: Function;

    constructor(coreDataService: CoreDataService) {
        this.validator = validateNameNotChrisFactory(coreDataService);
    };

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

我似乎无法弄清楚如何将一些数据或单个值传递到指令中，以便我可以使验证指令不那么具体并更多地重用它。例如，如何在我的示例中传入要测试的名称，而不是将测试名称“Chris”硬编码到其中？

任何的建议都受欢迎。

拉胡尔·辛格

利用Input()指令内的输入标签即事件发射器将模板中的值获取到指令中并使其通用。

苏格兰威士忌的这篇文章会让你的事情变得更容易https://scotch.io/tutorials/how-to-implement-a-custom-validator-directive-confirm-password-in-angular-2

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。