Angular响应式表单中为datepicker赋值时报错TypeError: date.match is not a function

That error pops up because somewhere in your datepicker's internal code, it's trying to call the match() method (a string-only function) on a value that isn't a string. Let's break this down and fix it:

Why This Happens #

Your code is passing a Date object directly to the form control, but many datepicker components (especially non-Angular Material ones) expect a formatted string (like yyyy-MM-dd) instead of a raw Date instance. Alternatively, if your backend returns an invalid/empty date string, new Date() will create an Invalid Date object, which also breaks when the datepicker tries to treat it like a string.

Step-by-Step Fixes #

1. First, Validate Your Backend Date Strings #

Start by checking what your service is actually returning. Add a console log to confirm the date values are valid strings:

this.dataService.getProject(this.id).subscribe((rps) => {
  console.log('Effective date:', typeof rps.agreement.dateEffective, rps.agreement.dateEffective);
  console.log('Expiration date:', typeof rps.agreement.dateExpiration, rps.agreement.dateExpiration);
  // ... rest of your code
})

If you see null, undefined, or a malformed string (like '' or '2024/13/01'), you'll need to handle those cases to avoid creating invalid Date objects.

2. Convert Dates to the Format Your Datepicker Expects #

Most datepickers work best with ISO 8601 date strings (e.g., 2024-05-20). Modify your code to convert the Date object to this string format, and add guards for invalid dates:

ngOnInit() { 
  this.id = this.route.snapshot.url[1].path 
  this.dataService.getProject(this.id).subscribe((rps) => { 
    this.agreementSumary = { 
      agreementType: rps.agreement.agreementType, 
      referenceNumber: rps.agreement.referenceNumber, 
      isEffective: rps.agreement.isEffective, 
      dateEffective: rps.agreement.dateEffective, 
      dateExpiration: rps.agreement.dateExpiration 
    }

    // Handle effective date
    const effectiveDate = this.agreementSumary.dateEffective ? new Date(this.agreementSumary.dateEffective) : null;
    if (effectiveDate && !isNaN(effectiveDate.getTime())) {
      // Convert to yyyy-MM-dd string format
      this.agreementEditFrm.controls["dateEffective"].setValue(effectiveDate.toISOString().split('T')[0]);
    } else {
      // Set empty or null if date is invalid
      this.agreementEditFrm.controls["dateEffective"].setValue(null);
    }

    // Handle expiration date
    const expirationDate = this.agreementSumary.dateExpiration ? new Date(this.agreementSumary.dateExpiration) : null;
    if (expirationDate && !isNaN(expirationDate.getTime())) {
      this.agreementEditFrm.controls["dateExpiration"].setValue(expirationDate.toISOString().split('T')[0]);
    } else {
      this.agreementEditFrm.controls["dateExpiration"].setValue(null);
    }
  }, error => console.log(error) )
}

3. If You're Using Angular Material Datepicker #

If you're using Angular Material's MatDatepicker, it expects a Date object directly—but the error still suggests something's off. Double-check:

• You've imported MatDatepickerModule, MatNativeDateModule (or a custom date adapter) in your module.
• Your form control isn't using a validator that expects a string (like Validators.pattern for a date string format).

Quick Test #

If the error persists, temporarily set a hardcoded string value to rule out formatting issues:

this.agreementEditFrm.controls["dateEffective"].setValue('2024-05-20');

If this works, the issue is definitely with how you're formatting the date value before passing it to the control.

内容的提问来源于stack exchange，提问作者Ricardo Sanchez Santos