Чтобы показать пример из реальной жизни, допустим, что мы хотим использовать указатель даты @ angular / material в нашем приложении.
Мы хотим использовать его на многих страницах, поэтому мы хотим упростить добавление его в форму с одинаковой конфигурацией повсюду.Чтобы удовлетворить эту потребность, мы создаем пользовательский угловой компонент вокруг <mat-datepicker> с реализацией ControlValueAccessor, чтобы иметь возможность использовать [(ngModel)] на нем.
Мы хотим обработать типичные проверки в компоненте, но в то же время мы хотим сделать результаты проверки доступными для внешнего компонента, который включает в себя наш CustomDatepickerComponent.
Как простое решение, мы можем реализовать метод validate(), подобный этому (innerNgModel происходит из экспортированного ngModel: #innerNgModel="ngModel". См. Полный код в конце этого вопроса):
validate() {
return (this.innerNgModel && this.innerNgModel.errors) || null;
}
На этом этапе мыможно использовать средство выбора даты в любом компоненте формы очень простым способом (как мы и хотели):
<custom-datepicker [(ngModel)]="myDate"></custom-datepicker>
Мы также можем расширить вышеприведенную строку, чтобы улучшить отладку (например, так)):
<code><custom-datepicker [(ngModel)]="myDate" #date="ngModel"></custom-datepicker>
<pre>{{ date.errrors | json }} Пока я меняю значение в пользовательском компоненте DatePicker, все работает нормально.Окружающая форма остается недействительной, если в указателе даты есть какие-либо ошибки (и она становится действительной, если указатель даты действителен).
НО!
Если член myDateвнешний компонент формы (который передается как ngModel) изменяется внешним компонентом (например: this.myDate= null), затем происходит следующее:
-
writeValue() из CustomDatepickerComponent запускается, ион обновляет значение DatePicker. validate() CustomDatepickerComponent запускается, но в этот момент innerNgModel не обновляется, поэтому он возвращает проверку более раннего состояния.
Чтобы решить эту проблему, мы можем передать изменение из компонента в setTimeout:
public writeValue(data) {
this.modelValue = data ? moment(data) : null;
setTimeout(() => { this.emitChange(); }, 0);
}
В этом случае emitChange (передает изменение пользовательского компонента) собирается запустить новую проверку,И из-за setTimeout, он будет запускаться в следующем цикле, когда innerNgModel уже обновлен.
Мой вопрос заключается в том, что если есть какой-либо лучший способ справиться с этой проблемой, чем использованиеsetTimeout? И, если возможно, я бы придерживался реализации на основе шаблонов.
Заранее спасибо!
Полный исходный код примера:
custom-datepicker.component.ts
import {Component, forwardRef, Input, ViewChild} from '@angular/core';
import {ControlValueAccessor, NG_VALIDATORS, NG_VALUE_ACCESSOR, NgModel} from '@angular/forms';
import * as moment from 'moment';
import {MatDatepicker, MatDatepickerInput, MatFormField} from '@angular/material';
import {Moment} from 'moment';
const AC_VA: any = {
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => CustomDatepickerComponent),
multi: true
};
const VALIDATORS: any = {
provide: NG_VALIDATORS,
useExisting: forwardRef(() => CustomDatepickerComponent),
multi: true,
};
const noop = (_: any) => {};
@Component({
selector: 'custom-datepicker',
templateUrl: './custom-datepicker.compnent.html',
providers: [AC_VA, VALIDATORS]
})
export class CustomDatepickerComponent implements ControlValueAccessor {
constructor() {}
@Input() required: boolean = false;
@Input() disabled: boolean = false;
@Input() min: Date = null;
@Input() max: Date = null;
@Input() label: string = null;
@Input() placeholder: string = 'Pick a date';
@ViewChild('innerNgModel') innerNgModel: NgModel;
private propagateChange = noop;
public modelChange(event) {
this.emitChange();
}
public writeValue(data) {
this.modelValue = data ? moment(data) : null;
setTimeout(() => { this.emitChange(); }, 0);
}
public emitChange() {
this.propagateChange(!this.modelValue ? null : this.modelValue.toDate());
}
public registerOnChange(fn: any) { this.propagateChange = fn; }
public registerOnTouched() {}
validate() {
return (this.innerNgModel && this.innerNgModel.errors) || null;
}
}
и шаблон (custom-datepicker.compnent.html):
<mat-form-field>
<mat-label *ngIf="label">{{ label }}</mat-label>
<input matInput
#innerNgModel="ngModel"
[matDatepicker]="#picker"
[(ngModel)]="modelValue"
(ngModelChange)="modelChange($event)"
[disabled]="disabled"
[required]="required"
[placeholder]="placeholder"
[min]="min"
[max]="max">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
<mat-error *ngIf="innerNgModel?.errors?.required">This field is required!</mat-error>
<mat-error *ngIf="innerNgModel?.errors?.matDatepickerMin">Date is too early!</mat-error>
<mat-error *ngIf="innerNgModel?.errors?.matDatepickerMax">Date is too late!</mat-error>
</mat-form-field>
окружающий микромодуль (custom-datepicker.module.ts):
import {NgModule} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {MatDatepickerModule, MatFormFieldModule, MatInputModule, MAT_DATE_LOCALE, MAT_DATE_FORMATS} from '@angular/material';
import {CustomDatepickerComponent} from './custom-datepicker.component';
import {MAT_MOMENT_DATE_ADAPTER_OPTIONS, MatMomentDateModule} from '@angular/material-moment-adapter';
import {CommonModule} from '@angular/common';
const DATE_FORMATS = {
parse: {dateInput: 'YYYY MM DD'},
display: {dateInput: 'YYYY.MM.DD', monthYearLabel: 'MMM YYYY', dateA11yLabel: 'LL', monthYearA11yLabel: 'MMMM YYYY'}
};
@NgModule({
imports: [
CommonModule,
FormsModule,
MatMomentDateModule,
MatFormFieldModule,
MatInputModule,
MatDatepickerModule
],
declarations: [
CustomDatepickerComponent
],
exports: [
CustomDatepickerComponent
],
providers: [
{provide: MAT_DATE_LOCALE, useValue: 'es-ES'},
{provide: MAT_DATE_FORMATS, useValue: DATE_FORMATS},
{provide: MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: {useUtc: false}}
]
})
export class CustomDatepickerModule {}
И части внешнего компонента формы:
...
{{ date.errors | json }}
set2null ...