Angular Formly 自定义组件验证消息未在失焦时显示问题的解决方案

import { Component, forwardRef, Input } from '@angular/core';
import {
  ControlValueAccessor,
  FormControl,
  NG_VALUE_ACCESSOR,
} from '@angular/forms';
import { NgbDatepicker } from '@ng-bootstrap/ng-bootstrap'; // 假设已导入NgbDatepicker

@Component({
  selector: 'custom-date-picker',
  template: `
  <div class="input-group">
  <input
    class="form-control"
    placeholder="yyyy-mm-dd"
    name="dp"
    [formControl]="myControl"
    ngbDatepicker
    #d="ngbDatepicker"
    (keyup)="change($event)"
    (dateSelect)="change($event)"
  />
  <button
    class="btn btn-outline-secondary bi bi-calendar3"
    (click)="d.toggle()"
    type="button"
  ></button>
</div>
  `,
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => NgbdDatepickerPopup),
      multi: true,
    },
  ],
})
export class NgbdDatepickerPopup implements ControlValueAccessor {
  myControl = new FormControl();
  model = '';
  private _onChange = (value: unknown) => {};
  private _onTouch = (value: unknown) => {}; // 这里的 _onTouch 是私有的，且只在 change 中被调用

  writeValue(obj: any): void {
    this.myControl.setValue(obj);
  }
  registerOnChange(fn: any): void {
    this._onChange = fn;
  }
  registerOnTouched(fn: any): void {
    this._onTouch = fn;
  }

  change(event: unknown) {
    if (event instanceof Event) {
      const date = (event.target as HTMLInputElement).value;
      this._onChange(date);
      this._onTouch(date); // 仅在此处调用 _onTouch
    }
  }
}

import { Component } from '@angular/core';
import { FieldType } from '@ngx-formly/core';

@Component({
 selector: 'formly-field-input',
 template: `
   <custom-date-picker [formControl]="formControl" [formlyAttributes]="field"></custom-date-picker>
   <div class="invalid-feedback" style="display: block;">
            <formly-validation-message *ngIf="showError" [field]="field"></formly-validation-message>
    </div>
 `,
})
export class FormlyFieldInput extends FieldType {}

import { Component, forwardRef, Input } from '@angular/core';
import {
  ControlValueAccessor,
  FormControl,
  NG_VALUE_ACCESSOR,
} from '@angular/forms';
import { NgbDatepicker } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'custom-date-picker',
  template: `
  <div class="input-group">
  <input
    class="form-control"
    placeholder="yyyy-mm-dd"
    name="dp"
    [formControl]="myControl"
    ngbDatepicker
    #d="ngbDatepicker"
    (keyup)="change($event)"
    (dateSelect)="change($event)"
    (blur)="_onTouch($event)" <!-- 新增：在失焦时调用 _onTouch -->
  />
  <button
    class="btn btn-outline-secondary bi bi-calendar3"
    (click)="d.toggle()"
    type="button"
  ></button>
</div>
  `,
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => NgbdDatepickerPopup),
      multi: true,
    },
  ],
})
export class NgbdDatepickerPopup implements ControlValueAccessor {
  myControl = new FormControl();
  model = '';
  private _onChange = (value: unknown) => {};
  public _onTouch = (value: unknown) => {}; // 修正：改为 public

  writeValue(obj: any): void {
    this.myControl.setValue(obj);
  }
  registerOnChange(fn: any): void {
    this._onChange = fn;
  }
  registerOnTouched(fn: any): void {
    this._onTouch = fn;
  }

  change(event: unknown) {
    if (event instanceof Event) {
      const date = (event.target as HTMLInputElement).value;
      this._onChange(date);
      this._onTouch(date);
    }
  }
}