2

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

我从多个其他问题和博客文章中汇总了以下代码，但大多数集中在响应式表单而不是模板上。

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">
4

1 回答 1

2

您应该使用ngOnInit钩子来初始化验证器，因为在构造函数中还没有初始化 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;
    }
}
于 2019-09-26T14:30:57.543 回答