Пользовательский компонент Mat-Datepicker ExpressionChangedAfterItHasBeenChecked Ошибка

Question

Я делаю пользовательский компонент DatePicker, чтобы он мог работать с локализацией и moment.js, а также с реактивными формами.

Я настроил компонент, но после события DateChange, после того, как он выходит из зоны, он выдает ошибку:

ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'ng-valid: true'. Current value: 'ng-valid: false'.

На данный момент у меня нет идей, как это исправить, хотя я пытался исправить это с ChangeDetectorRef что делает мою проверку неуправляемой, и подобные вещи случаются с this.control.updateValueAndValidty(),

В конце концов, это происходит намного позже, чем я могу вызвать что-либо. Я полагаю, это проблема входного элемента, поэтому я постараюсь перехватить событие изменения.

Так что это date-picker.component.ts:

import { MomentDateAdapter } from '@angular/material-moment-adapter';
import { Component, OnInit, forwardRef, Input, Self, Optional, ChangeDetectorRef } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR, Validator, NG_VALIDATORS, FormControl, NgControl, FormControlName } from '@angular/forms';
import * as _moment from 'moment';
import { MatDatepickerInputEvent, MAT_DATE_FORMATS, DateAdapter, MAT_DATE_LOCALE } from '@angular/material';
import { default as _rollupMoment } from 'moment';
const moment = _rollupMoment || _moment;

export const DATE_FORMATS = {
  parse: {
    dateInput: 'DD.MM.YYYY.',
  },
  display: {
    dateInput: 'DD.MM.YYYY.',
    monthYearLabel: 'MMM YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM YYYY',
  },
};


@Component({
  selector: 'app-date-picker',
  templateUrl: './date-picker.component.html',
  styleUrls: ['./date-picker.component.scss'],
  providers: [
    { provide: MAT_DATE_LOCALE, useValue: 'sr' },
    { provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE] },
    { provide: MAT_DATE_FORMATS, useValue: DATE_FORMATS }
  ]
})
export class DatePickerComponent implements ControlValueAccessor {
  control: FormControl;
  private onChange = (value: any) => { };
  private onTouched = (value: any) => { };
  @Input() dateValue: string = null;
  @Input() errorMessage: string = "This is required.";
  @Input() public placeholder: string = null;
  @Input() public minDate: string = null;
  @Input() public maxDate: string = null;
  @Input() public startDate: string = null;
  @Input() public label: string = null;

  constructor(@Optional() @Self() private ngControl: NgControl, @Optional() private controlName: FormControlName, private cdr: ChangeDetectorRef) {
    if(this.ngControl != null) {
      this.ngControl.valueAccessor = this;
    }
  }

  ngOnInit() {
    moment.locale('sr');
    this.control = this.controlName.control;
  }

  onDateChange(event: MatDatepickerInputEvent<Date>) {
    this.dateValue = moment(event.value).format();
    this.onChange(event.value);
  }

  // get errorState() {
  //   debugger;

  //   if(!this.dateValue){
  //     return this.ngControl.errors !== null && !!this.ngControl.touched;
  //   }
  //   return false;
  // }

  // ControlValueAccessor methods
  writeValue(value: any): void {
    if(value !== undefined || value !== '') {
      this.dateValue = moment(value).format();
    }
  }

  registerOnChange(fn) {
    this.onChange = fn;
  }

  registerOnTouched() {}
  // registerOnTouched(fn) {
  //   this.onTouched = fn;
  // }


}

А это date-picker.component.html:

<div class="date-picker">
    <mat-form-field class="full-width">

      <mat-label>{{ label }}</mat-label>
      <input #dpInput matInput
        [matDatepicker]="componentDatePicker"
        (dateChange)="onDateChange($event)"
        [formControl]="control"
        [value]="dateValue"
        [min]="minDate"
        [max]="maxDate"
        [placeholder]="placeholder"
        [formControl]='control'>

      <mat-datepicker-toggle matSuffix [for]="componentDatePicker"></mat-datepicker-toggle>
      <mat-datepicker #componentDatePicker></mat-datepicker>
      <mat-error [innerHTML]="errorMessage"></mat-error>

    </mat-form-field>
</div>

И я меняю min а также max значения в родительском компоненте, возвращая new Date(year, month, day) объект со значениями или null, Есть несколько экземпляров одного и того же средства выбора, поэтому я посылаю строковое значение, чтобы различать их.

<app-date-picker
   [minDate]="getMinDate('datepickerIdentifier')"
   [maxDate]="getMaxDate('datepickerIdentifier')"
   [placeholder]="'Placeholder string'"
   [label]="'Label string'"
   [errorMessage]="'Error string'"
   formControlName="applicationEnd"
   required>
 </app-date-picker>

Я пытался создать повторно используемый компонент datepicker, который будет иметь локализацию, определенный формат даты и который будет легко включен в реагирующие формы, чтобы я мог проверить его с остальными данными формы и показать Validation.required ошибки.

К сожалению, я понятия не имею, с чего начать отлаживать это.

РЕДАКТИРОВАТЬ: я пытался сделать стек стлиц, но это вроде как дает мне много ошибок, но, тем не менее, вот оно: https://stackblitz.com/edit/angular-aylptw

Answer 1

Я добился этого

Эта ExpressionChangedAfterItHasBeenChecked выдается, когда выражение в вашем HTML изменилось после того, как Angular уже проверил или сравнил oldValue !== newValue. Сделайте свою стратегию обнаружения изменений так, чтобыonPush как показано ниже, и активируйте обнаружение изменений вручную, как описано в последнем фрагменте кода.

@Component({
                   ...                   
  changeDetection: ChangeDetectionStrategy.OnPush
})

Вы следите за документацией по материалам Angular, это хорошо.

import { MatDateFormats } from '@angular/material/core'; //import MatDateFormats 

export const APP_DATE_FORMATS: MatDateFormats = {
parse: {
  dateInput: 'MM/DD/YYYY', //whichever format you are tyring, define here
},
display: {
  dateInput: 'MM/DD/YYYY', //change accordingly, to display
  monthYearLabel: 'MMM YYYY',
  dateA11yLabel: 'LL',
  monthYearA11yLabel: 'MMMM YYYY',
  }
};
    

Пожалуйста, попробуйте создать приведенный выше код в другом файле, его легче поддерживать.

import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material/core';
import { APP_DATE_FORMATS } from '../../helpers/datepicker.format';
import { MomentDateAdapter, MAT_MOMENT_DATE_ADAPTER_OPTIONS } from '@angular/material-moment-adapter'; 
//register the imports respectively which are going to be addressed in providers

    
providers: [
  { provide: DateAdapter, useClass: MomentDateAdapter },
  {
    provide: MAT_DATE_FORMATS, useValue: APP_DATE_FORMATS,
    deps: [
     MAT_DATE_LOCALE,
     MAT_MOMENT_DATE_ADAPTER_OPTIONS
    ]
  }
 ]

Обновите поставщиков соответствующих модулей, как указано выше, и выполните проверки реактивной формы, если вы столкнетесь с Error: ExpressionChangedAfterItHasBeenChecked затем определите следующие ChangeDetectorRefот ʻangular / core для решения в соответствующем компоненте. Спасибо.

constructor(private _cdr: ChangeDetectorRef) {}
        
insideYourValidations() {
 setTimeout(() => {
  this._cdr.detectChanges() //call to update/detect your changes
 }, 1500);
}

Иногда, когда мы получаем ExpressionchangeError datepicker может не обновлять значение даты, с ChangeDetectorRef значения ввода формы обновляются, если пользователь пытается ввести вручную без использования datepicker.

Это помогло мне решить мою проблему. zmag Спасибо

Answer 2

  onDateChange(event: MatDatepickerInputEvent<Date>) {
    this.dateValue = moment(event.value).format();
    this.onChange(event.value); <= THIS WAS THE PROBLEM
  }

Похоже, после удаления this.onChange(event.value)и проверка, и компонент начали работать довольно хорошо.

РЕДАКТИРОВАТЬ: он удалил другие проблемы, которые у меня были с ним, но по-прежнему бросает ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'ng-valid: true'. Current value: 'ng-valid: false'.