Angular 9表单构建器 日期验证器问题

HTML input element有一个具有许多属性的validityState类. 当您输入错误的日期时，badInput属性是true.

因此，您可以通过添加额外的助手函数来实现您想要的功能:

Firstly add a new helper variable个

badInput: boolean = false;

Form has only the required Validation个

let now = new Date();
this.updateForm = new FormGroup({
      date_new: new FormControl(now, [
        Validators.required,
      ]),
    });

add a new helper function个

check(e: any){
  const target = e.target as HTMLInputElement;
  if (target.validity.badInput){
    this.badInput = target.validity.badInput 
  }
  else{
    this.badInput = false
  }
}

html个

<input
      type="date"
      class="form-control input is-primary"
      formControlName="date_new"
      [(ngModel)]="now"
      cdkFocusInitial
      formtarget="date : 'yyyy-MM-dd'"
      (keyup)="check($event)"
      />

  <div *ngIf="updateForm.controls['date_new'].errors && !badInput">Please enter a date
</div>
  <div *ngIf="updateForm.controls['date_new'].errors && badInput">Invalid date
</div>

您需要updateForm.controls['date_new'].errors来仅在出错时显示div，并在更改HTMLInputElement之后显示badInput的更改