Question

我有一个自定义验证器来评估2个控制器值; totalDisch应该超过damaNumb

的NumberValidator

import { AbstractControl, ValidationErrors } from '@angular/forms';

export class NumberValidator {
    static invalidDama(c: AbstractControl): ValidationErrors | null {
        //safety check
        if (!c.get('damaNumb').value || !c.get('totalDisch').value) return null;

       if (c.get('damaNumb').value < c.get('totalDisch').value)
            return { invalidDama: true }
        return null;
    }
}

html模板

 <div class="form-group">
                        <label for="damaNumb">DAMA Number:</label>
                        <input type="number" formControlName="damaNumb" id="damaNumb" class="form-control" placeholder="Enter DAMA Number (1-100)" [(ngModel)]="damaNumb" [min]="1" [max]="100" />
                        <div *ngIf="form.get('damaNumb').touched && form.get('damaNumb').invalid" class="alert alert-danger">
                            <div *ngIf="form.get('damaNumb').errors.required">DAMA Number is required....</div>
                            <div *ngIf="form.get('damaNumb').errors.min">Minimum "1"....</div>
                            <div *ngIf="form.get('damaNumb').errors.max">Maximum "100"....</div>
                        </div>




      </div>

        <div class="form-group">
                <label for="totalDisch">Total Discharges:</label>
                <input type="number" formControlName="totalDisch" id="totalDisch" class="form-control" placeholder="Enter Total Discharges (1-100)" [(ngModel)]="totalDisch" [min]="1" [max]="100" />
                <div *ngIf="form.get('totalDisch').touched && form.get('totalDisch').invalid" class="alert alert-danger">
                    <div *ngIf="form.get('totalDisch').errors.required">Total Discharges is required....</div>
                    <div *ngIf="form.get('totalDisch').errors.min">Minimum "1"....</div>
                    <div *ngIf="form.get('totalDisch').errors.max">Maximum "100"....</div>
                    <div *ngIf="form.get('totalDisch').errors.invalidDama">Discharges can not be less than DAMA....</div>
                </div>
            </div>

组件文件：

form = new FormGroup({
        hospital: new FormControl({ value: '', disabled: true }, Validators.required),
        department: new FormControl('', Validators.required),
        damaDt: new FormControl('', Validators.required),
        damaNumb: new FormControl('', Validators.required),
        totalDisch: new FormControl('',[
            Validators.required,
            NumberValidator.invalidDama
        ]),
        notes: new FormControl('', Validators.maxLength(125))
    } );

加载页面时出现错误

TypeError：无法读取属性＆＃39;值＆＃39;为null

有任何帮助吗？提前谢谢............

当totalDisch小于damaNumb且函数在调用之外的同一组件文件中时，我能够引发错误

export function invalidDama(c: AbstractControl) {
    //safety check

    if (!c.get('damaNumb').value || !c.get('totalDisch').value) {return { c: c.get('totalDisch').setErrors(null) } }

    if (c.get('damaNumb').value < c.get('totalDisch').value)
    { return { c: c.get('totalDisch').setErrors(null) } }
    return { c: c.get('totalDisch').setErrors({ invalidDama: true }) };
}

表单组已修改：

 form = new FormGroup({
        hospital: new FormControl({ value: '', disabled: true }, Validators.required),
        department: new FormControl('', Validators.required),
        damaDt: new FormControl('', Validators.required),
        damaNumb: new FormControl('', Validators.required),
        totalDisch: new FormControl('', Validators.required),
        notes: new FormControl('', Validators.maxLength(125))
    },  invalid

但是，表格总是禁用（提交按钮），即使表格有效................？

Angular 4反应形式自定义验证器返回TypeError：无法读取属性＆＃39; value＆＃39; null

0 个答案: