用户选择错误日期时如何显示验证消息?

检查更新的答案: https://stackblitz.com/edit/angular-4wksfn?file=src/app/app.component.ts

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { IMyDpOptions } from 'mydatepicker';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = 'Angular';
  showError =false;
  cf: FormGroup;
  datePickerOptions: IMyDpOptions = {
    dateFormat: 'dd/mm/yyyy',
  };
  constructor(private fb: FormBuilder) {
    this.cf = this.fb.group({
      dateOfBirth: ['',[Validators.required]],
      pancard: ['',[Validators.required]]

    })


  }
  onSubmit() {
   const formVal=this.cf.value;
   let dateOfBirth=formVal.dateOfBirth.epoc;
   let pancard=formVal.pancard.epoc;
   if(dateOfBirth > pancard)
   {
this.showError =true;
   }else{
     this.showError =false;
   }
  }

}





<form novalidate [formGroup]="cf">
<div class="col-4 pull-left pl-10 pr-10 mb-20 form-cont">
      <p class="fs-12 color-grey text-uppercase">Date of Birth<span class="color-red fontWt">&nbsp;*(DD/MM/YYYY)</span></p>
      <my-date-picker [options]="datePickerOptions"
                      formControlName="dateOfBirth"></my-date-picker>
        <span class="error-msg mt--10"
            *ngIf="(cf.get('dateOfBirth').dirty || showError)
            && cf.get('dateOfBirth').errors
            && cf.get('dateOfBirth').errors.required">Please select date of birth.</span>
    </div>

    <div class="col-4 pull-left pl-10 pr-10 mb-20 form-cont">
      <p class="fs-12 color-grey text-uppercase">Date of issue pan card<span class="color-red fontWt">&nbsp;*(DD/MM/YYYY)</span></p>
      <my-date-picker [options]="datePickerOptions"
                      formControlName="pancard"></my-date-picker>
        <span class="error-msg mt--10"
            *ngIf="(cf.get('pancard').dirty || showError)
            && cf.get('pancard').errors
            && cf.get('pancard').errors.required">Please select pancard issue date.</span>
    </div>
        <div *ngIf="showError" class="col-4 pull-left pl-10 pr-10 mb-20 form-cont">
      <p class="fs-12 color-red text-uppercase" style="color:red">Error: DOB greater than date of issue pancard, input correct date</p>
    </div>
    <button (click)=onSubmit()>submit</button>
</form>

您应该能够创建一个接受两个控件名称的自定义组验证器。

this.cf = this.fb.group({
     dateOfBirth: ['',[Validators.required]],
     pancard: ['',[Validators.required]]
},
{
    validator: [
                dateCheckValidator('dateOfBirth','pancard')
            ]
})

并将验证器实现为:

export function dateCheckValidator(input1: string, input2: string) {
    return function (formGroup: FormGroup) {
        let dobControl = formGroup.get(input1);
        let pancardControl = formGroup.get(input2);

        // ... logic here
        if(error){
            return {'dateError': true};
        }
        return null;
    }
}

更新 https://stackblitz.com/edit/angular-pqugyk