将参数传递给 Angular 7 模板驱动的表单自定义验证器

Question

如何将参数传递给为 Angular 7 中的模板驱动表单编写的自定义验证器？

我从多个其他问题和博客文章中得到了以下代码，但大多数都围绕响应式表单而不是 tempalte。

import { AbstractControl, ValidatorFn, NG_VALIDATORS, Validator, FormControl } from '@angular/forms';
import { Directive, Input } from '@angular/core';

// validation function
function validateMinValue(minValue: number): ValidatorFn {
    return (c: AbstractControl) => {

        console.log(minValue); 
        return null;
    }
}

@Directive({
    selector: '[minValue][ngModel]',
    providers: [
        { provide: NG_VALIDATORS, useExisting: MinValueValidator, multi: true }
    ]
})
export class MinValueValidator implements Validator {
    @Input("minValue") minValue;
    validator: ValidatorFn;

    constructor() {
        this.validator = validateMinValue(this.minValue);
    }

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

如何在这样的输入中访问传递给 minValue 的值

<input type="text" name="testInput" class="form-control"
        [(ngModel)]="testValue" required
        currencyMask [options]="{ thousands: ',', decimal: '.' }"
        minValue="100">

Answer 1

您应该使用 ngOnInit 挂钩来初始化验证器，因为尚未在构造函数中初始化输入属性。

ngOnInit() {
   this.validator = validateMinValue(this.minValue);
}

这样，初始化值将传递给您的验证器。

另一种方法是在您的自定义指令中简单定义验证器并从当前上下文中获取 minValue this:

export class MinValueValidator implements Validator {
    @Input("minValue") minValue;

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

将参数传递给 Angular 7 模板驱动的表单自定义验证器

Pass parameter to Angular 7 template driven form custom validator

angular

angular-forms

angular-template-form