Question

我们使用FormBuilder，FormGroup，Validators，FormControl来检查和显示验证。对于日期验证，我使用了自定义验证。为此，我创建了一个验证指令DateTypeValidationDirective。请参阅以下代码段。

import { Directive, Input } from "@angular/core";
import { NG_VALIDATORS, Validator, AbstractControl, ValidatorFn } from "@angular/forms";
import * as moment from "moment";

@Directive({
    selector: '[date]',
    providers: [{ provide: NG_VALIDATORS, useExisting:
                DateTypeValidatorDirective, multi: true }]

})

export class DateTypeValidatorDirective implements Validator {
    @Input() dDate: Date;
    validate(control: AbstractControl): { [key: string]: any } {
        return this.dDate ? this.dateTypeValidator()(control)
            : null;
    }
    dateTypeValidator(): ValidatorFn {
        return (control: AbstractControl): { [key: string]: any } => {
            const valid = control.value == '' || moment(moment(control.value).format("l LT"), ["l LT"], true).isValid() 

            if (!valid) {
                return {
                      'dateType': { value: "invalid date" }
                }; 
            }    
         };
   }
}

在组件中，我使用了以下代码段

ngOnInit(): void {
     this.formGroupCore = this.formBuilder.group({

     dueDate: new FormControl("", 
     [this.dateTypeValidatorDirective.dateTypeValidator()])
    });
}

在html文件中编写下面的代码

<input id="dueDate" type="date" formControlName="dueDate" 
            class="form-control form-control-sm" />

<app-form-group-control-validation-display
    *ngIf="formGroupCore.get('dueDate').hasError(error)" 
    [formGroup]="formGroupCore" [propertyName]="'dueDate'" >invalid date
</app-form-group-control-validation-display>

验证工作正常，但未显示错误消息。如何设置错误消息？

请任何人帮助实现相同的目标

Answer 1

我已尝试使用以下代码段，验证工作正常。

<app-form-group-control-validation-display  [formGroup]="formGroupCore" [propertyName]="'dueDate'" [custom]="[{'dateType':'Please enter a valid date'}]">
                            </app-form-group-control-validation-display>

如何使用＆＃34; app-form-group-control-validation-display＆＃34;显示自定义验证错误消息在角4

1 个答案: