Question

我当前的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'硬编码到其中呢？

欢迎任何建议。

Answer 1

在指令中使用输入标记i：e Input()事件发射器，将模板中的值从指令中获取并使其成为通用。

苏格兰威士忌的这篇文章将使您更轻松https://scotch.io/tutorials/how-to-implement-a-custom-validator-directive-confirm-password-in-angular-2

角度表单自定义验证数据

1 个答案: