typescript Angular在响应式表单中验证日期

mftmpeh8 于 2023-06-07 发布在 TypeScript

关注(0)|答案(2)|浏览(224)

我正在尝试使用响应式表单验证日期格式，如果格式不匹配（MM/DD/YYYY），则显示错误消息
有效的日期格式为：

6/30/2020 (MM/DD/YYYY)
12/30/2020  (MM/DD/YYYY)

以下是我所做的：
组件：

initForm() {    
    this.filterForm = this.formBuilder.group({
        valueDate: [this.transactionFilter.valueDate,Validators.pattern(/^(0[1-9]|[1-2][0-9]|3[0-1])\/(0[1-9]|1[0-2])\/[0-9]{4}$/)]
    }, { validators: this.validateFormControls });
}

validateFormControls(control: AbstractController){
    // Some other validations here
}

模板

<form [formGroup]="filterForm" (ngSubmit)="onSubmit()" >
    <div class="col">
        <mat-form-field>
            <mat-label>Value Date</mat-label>
            <input matInput [matDatepicker]="txtValueDate" placeholder="MM/DD/YYYY" formControlName="valueDate">
            <mat-datepicker-toggle matSuffix [for]="txtValueDate"></mat-datepicker-toggle>
            <mat-datepicker #txtValueDate></mat-datepicker>
            <!-- <mat-error *ngIf="filterForm.controls['valueDate'].hasError()">Invalid date Format</mat-error> -->
        </mat-form-field>
    </div>
    <button  mat-raised-button color="primary" type="submit" [disabled]="!filterForm.valid">submit</button>  
</form>

当我输入日期（手动/日期选择器）时，提交按钮总是被禁用。有没有更好的方法在响应式表单中进行日期验证？

typescript

来源：https://stackoverflow.com/questions/62194621/angular-validate-date-in-reactive-forms

2条答案

按热度按时间

pftdvrlh1#

默认的日期选择器格式是yyyy-MM-dd，所以你应该这样做：
组件

export class DateickerComponent {

  public dateForm: FormGroup;

  constructor() {

    var today: string | null = new DatePipe("en-US").transform(new Date(), "yyyy-MM-dd");

    this.dateForm = new FormGroup({
      date: new FormControl(today, Validators.required)
    });
  }
}

模板：

<form [formGroup]="dateForm" novalidate>
    <input type="date" formControlName="date">
<form>

赞(0）回复(0）举报 2023-06-07

vof42yt12#

您拥有的正则表达式匹配DD/MM/YYYY日期模式，在澳大利亚和英国等地使用。
对于美国格式，你说的MM/DD/YYYY你将需要交换前两组，使它

(0[1-9]|1[0-2])\/(0[1-9]|[1-2][0-9]|3[0-1])\/[0-9]{4}

这将足以验证格式。但是，它不会赶上2月30日等事情。对于这些类型的验证，我建议使用自定义验证器。我在下面贴了一张粗糙的。它仍然不处理二月和闰年，实际上限制了年份，但会让你大部分的方式。

import {FormControl} from '@angular/forms';
export function dateValidator(control: FormControl) {
if (!control.value) {
  return { 'datecheck' : true };
}

let curval:string = control.value;
let pieces: string[] = curval.split("/");

if (!pieces || pieces.length != 3) {
  return { 'datecheck' : true };
}

let month:number = +pieces[1];
if (month > 12 || month < 1) {
  return { 'datecheck' : true };
}

let day:number = +pieces[0];
if (day < 1) {
  return { 'datecheck' : true };
}
switch (month) {
  case 9:
  case 4:
  case 6:
  case 11:
    if (day > 30) {
      return { 'datecheck' : true };
    }
    break;
  case 1:
  case 3:
  case 5:
  case 7:
  case 8:
  case 9:
  case 10:
  case 12:
    if (day > 31) {
      return { 'datecheck' : true };
    }
    break;
  case 2:
    if (day > 29) {
      return { 'datecheck' : true };
    }
    break;
}

let year:number = +pieces[2];
if (year > 2100 || year < 1970) {
  return { 'datecheck' : true };
}

let curdate : Date = new Date(+pieces[2], month, day);

if (!isNaN(curdate.getTime())) {  // this is supposed to tell if curdate is valid
  return null;
}

return { 'datecheck' : true };

}

赞(0）回复(0）举报 2023-06-07

我来回答

typescript Angular在响应式表单中验证日期

2条答案

相关问题

热门标签

最新问答