如何使用 angular 中的 "app-form-group-control-validation-display" 显示自定义验证错误消息 4

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>

如何使用 angular 中的 "app-form-group-control-validation-display" 显示自定义验证错误消息 4

How to display Custom Validation error message using "app-form-group-control-validation-display" in angular 4

angular

forms

validation

angular-directive

formgroups