Angular 4：如何实现视图与模型日期格式差异化？已试ControlValueAccessor未果

Hey there! I get that you've tried all the usual fixes and nothing's stuck—let's nail this date format separation between your view (dd-mm-yy) and model (yyyy-mm-dd) layers properly. You mentioned struggling with ControlValueAccessor, so I'll walk you through a clean, working implementation plus a breakdown of how it all fits together.

This approach fully decouples the view display format from the model storage format while maintaining all Angular form functionality (two-way binding, validation, etc.).

Step 1: Build the Custom Date Component #

Create a reusable component that implements ControlValueAccessor to handle the format conversion logic:

import { Component, forwardRef } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
import { DatePipe } from '@angular/common';

@Component({
  selector: 'custom-date-input',
  template: `
    <input 
      type="text" 
      [(ngModel)]="internalViewDate" 
      (blur)="onInputBlurred()"
      placeholder="dd-mm-yy"
      class="form-control"
    />
  `,
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => CustomDateInputComponent),
      multi: true
    },
    DatePipe
  ]
})
export class CustomDateInputComponent implements ControlValueAccessor {
  internalViewDate: string = '';
  private internalModelDate: string = '';

  constructor(private datePipe: DatePipe) {}

  // Convert model format (yyyy-mm-dd) to view format (dd-mm-yy)
  writeValue(modelValue: string): void {
    if (modelValue) {
      this.internalModelDate = modelValue;
      this.internalViewDate = this.datePipe.transform(modelValue, 'dd-MM-yy') || '';
    } else {
      this.internalViewDate = '';
      this.internalModelDate = '';
    }
  }

  // Callback to notify parent form of model changes
  private onChangeCallback: (value: string) => void = () => {};
  private onTouchedCallback: () => void = () => {};

  registerOnChange(fn: (value: string) => void): void {
    this.onChangeCallback = fn;
  }

  registerOnTouched(fn: () => void): void {
    this.onTouchedCallback = fn;
  }

  // Convert view input (dd-mm-yy) to model format (yyyy-mm-dd)
  set internalViewDate(value: string) {
    const [day, month, year] = value.split('-');
    if (day && month && year) {
      // Handle 2-digit years (adjust logic if you need to support 19xx)
      const fullYear = year.length === 2 ? `20${year}` : year;
      // Ensure month/day are 2 digits (e.g., 5 → 05)
      const formattedMonth = month.padStart(2, '0');
      const formattedDay = day.padStart(2, '0');
      
      this.internalModelDate = `${fullYear}-${formattedMonth}-${formattedDay}`;
      this.onChangeCallback(this.internalModelDate);
    }
  }

  get internalViewDate(): string {
    return this._internalViewDate;
  }
  private _internalViewDate: string = '';

  onInputBlurred(): void {
    this.onTouchedCallback();
  }
}

Step 2: Use the Custom Control in Your Form #

You can use this component just like any standard form control—works with both reactive and template-driven forms:

Reactive Form Example #

<form [formGroup]="eventForm">
  <label>Event Date:</label>
  <custom-date-input formControlName="eventDate"></custom-date-input>
</form>

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

@Component({
  selector: 'app-event-form',
  templateUrl: './event-form.component.html'
})
export class EventFormComponent {
  eventForm: FormGroup;

  constructor(private fb: FormBuilder) {
    // Initialize form with model format (yyyy-mm-dd)
    this.eventForm = this.fb.group({
      eventDate: ['2024-05-20']
    });

    // Verify model format is preserved
    this.eventForm.get('eventDate')?.valueChanges.subscribe(modelValue => {
      console.log('Model Date (yyyy-mm-dd):', modelValue);
    });
  }
}

Key Details to Note #

• Format Conversion: The writeValue method handles converting the model's yyyy-mm-dd to the view's dd-mm-yy. The setter for internalViewDate converts user input back to the model format.
• Year Handling: The code assumes 2-digit years map to the 2000s—adjust this logic if you need to support older years (e.g., check if the year is < 50, use 20xx; else 19xx).
• Form Compatibility: This component integrates seamlessly with Angular's form APIs, so you can add validation, status classes, etc., just like with a regular input.

Alternative: Pipe + Directive (Simpler, Less Robust) #

If you don't want to build a full component, you can use a pipe for display and a directive for input conversion:

Display Pipe (View Format) #

import { Pipe, PipeTransform } from '@angular/core';
import { DatePipe } from '@angular/common';

@Pipe({ name: 'viewDate' })
export class ViewDatePipe implements PipeTransform {
  constructor(private datePipe: DatePipe) {}

  transform(modelValue: string): string {
    return this.datePipe.transform(modelValue, 'dd-MM-yy') || '';
  }
}

Input Conversion Directive #

import { Directive, HostListener, ElementRef } from '@angular/core';
import { NgControl } from '@angular/forms';

@Directive({ selector: '[modelDateConverter]' })
export class ModelDateConverterDirective {
  constructor(private el: ElementRef, private control: NgControl) {}

  @HostListener('blur') onBlur() {
    const inputValue = this.el.nativeElement.value;
    const [day, month, year] = inputValue.split('-');
    if (day && month && year) {
      const fullYear = year.length === 2 ? `20${year}` : year;
      const modelDate = `${fullYear}-${month.padStart(2, '0')}-${day.padStart(2, '0')}`;
      this.control.control?.setValue(modelDate);
    }
  }
}

Usage #

<input 
  type="text" 
  formControlName="eventDate"
  [value]="eventForm.get('eventDate')?.value | viewDate"
  modelDateConverter
>

This is lighter but lacks the robustness of the custom component (no real-time validation, less control over edge cases).

内容的提问来源于stack exchange，提问作者Rachit Bhatnagar