angular - 将参数传递给 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 Hook 来初始化验证器，因为构造函数中还没有初始化 Input 属性。

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;
    }
}