fix(datapicker): input update issue with reactive forms (#2945)

akveo · Nov 24, 2021 · 07527f8 · 07527f8
1 parent 2efa4c1
commit 07527f8
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 46 deletions.
diff --git a/src/framework/theme/components/datepicker/datepicker.component.ts b/src/framework/theme/components/datepicker/datepicker.component.ts
@@ -16,7 +16,6 @@ import {
  OnDestroy,
  Output,
  Type,
- AfterViewInit,
  OnInit,
  SimpleChanges,
  Optional,
@@ -372,10 +371,7 @@ export abstract class NbBasePicker<D, T, P> extends NbDatepicker<T, D> {
 @Component({
  template: '',
 })
-export class NbBasePickerComponent<D, T, P>
- extends NbBasePicker<D, T, P>
- implements OnInit, OnChanges, AfterViewInit, OnDestroy
-{
+export class NbBasePickerComponent<D, T, P> extends NbBasePicker<D, T, P> implements OnInit, OnChanges, OnDestroy {
  /**
  * Datepicker date format. Can be used only with date adapters (moment, date-fns) since native date
  * object doesn't support formatting.
@@ -489,6 +485,7 @@ export class NbBasePickerComponent<D, T, P>
 
  ngOnInit() {
  this.checkFormat();
+ this.init$.next();
  }
 
  ngOnChanges(changes: SimpleChanges) {
@@ -497,10 +494,6 @@ export class NbBasePickerComponent<D, T, P>
  }
  }
 
- ngAfterViewInit() {
- this.init$.next();
- }
-
  ngOnDestroy() {
  this.destroy$.next();
  this.destroy$.complete();

diff --git a/src/framework/theme/components/datepicker/datepicker.directive.ts b/src/framework/theme/components/datepicker/datepicker.directive.ts
@@ -24,12 +24,11 @@ import {
  ValidatorFn,
  Validators,
 } from '@angular/forms';
-import {fromEvent, merge, Observable, Subject} from 'rxjs';
-import {filter, map, take, takeUntil, tap} from 'rxjs/operators';
-
-import {NB_DOCUMENT} from '../../theme.options';
-import {NbDateService} from '../calendar-kit/services/date.service';
+import { fromEvent, merge, Observable, Subject } from 'rxjs';
+import { filter, map, take, takeUntil, tap } from 'rxjs/operators';
 
+import { NB_DOCUMENT } from '../../theme.options';
+import { NbDateService } from '../calendar-kit/services/date.service';
 
 /**
  * The `NbDatepickerAdapter` instances provide way how to parse, format and validate
@@ -279,6 +278,7 @@ export class NbDatepickerDirective<D> implements OnDestroy, ControlValueAccessor
  /**
  * Provides datepicker component.
  * */
+ // eslint-disable-next-line @angular-eslint/no-input-rename
  @Input('nbDatepicker')
  set setPicker(picker: NbDatepicker<D>) {
  this.picker = picker;
@@ -303,18 +303,17 @@ export class NbDatepickerDirective<D> implements OnDestroy, ControlValueAccessor
  /**
  * Form control validators will be called in validators context, so, we need to bind them.
  * */
- protected validator: ValidatorFn = Validators.compose([
- this.parseValidator,
- this.minValidator,
- this.maxValidator,
- this.filterValidator,
- ].map(fn => fn.bind(this)));
-
- constructor(@Inject(NB_DOCUMENT) protected document,
- @Inject(NB_DATE_ADAPTER) protected datepickerAdapters: NbDatepickerAdapter<D>[],
- protected hostRef: ElementRef,
- protected dateService: NbDateService<D>,
- protected changeDetector: ChangeDetectorRef) {
+ protected validator: ValidatorFn = Validators.compose(
+ [this.parseValidator, this.minValidator, this.maxValidator, this.filterValidator].map((fn) => fn.bind(this)),
+ );
+
+ constructor(
+ @Inject(NB_DOCUMENT) protected document,
+ @Inject(NB_DATE_ADAPTER) protected datepickerAdapters: NbDatepickerAdapter<D>[],
+ protected hostRef: ElementRef,
+ protected dateService: NbDateService<D>,
+ protected changeDetector: ChangeDetectorRef,
+ ) {
  this.subscribeOnInputChange();
  }
 
@@ -398,8 +397,9 @@ export class NbDatepickerDirective<D> implements OnDestroy, ControlValueAccessor
  protected minValidator(): ValidationErrors | null {
  const config = this.picker.getValidatorConfig();
  const date = this.datepickerAdapter.parse(this.inputValue, this.picker.format);
- return (!config.min || !date || this.dateService.compareDates(config.min, date) <= 0) ?
- null : { nbDatepickerMin: { min: config.min, actual: date } };
+ return !config.min || !date || this.dateService.compareDates(config.min, date) <= 0
+ ? null
+ : { nbDatepickerMin: { min: config.min, actual: date } };
  }
 
  /**
@@ -408,8 +408,9 @@ export class NbDatepickerDirective<D> implements OnDestroy, ControlValueAccessor
  protected maxValidator(): ValidationErrors | null {
  const config = this.picker.getValidatorConfig();
  const date = this.datepickerAdapter.parse(this.inputValue, this.picker.format);
- return (!config.max || !date || this.dateService.compareDates(config.max, date) >= 0) ?
- null : { nbDatepickerMax: { max: config.max, actual: date } };
+ return !config.max || !date || this.dateService.compareDates(config.max, date) >= 0
+ ? null
+ : { nbDatepickerMax: { max: config.max, actual: date } };
  }
 
  /**
@@ -418,8 +419,7 @@ export class NbDatepickerDirective<D> implements OnDestroy, ControlValueAccessor
  protected filterValidator(): ValidationErrors | null {
  const config = this.picker.getValidatorConfig();
  const date = this.datepickerAdapter.parse(this.inputValue, this.picker.format);
- return (!config.filter || !date || config.filter(date)) ?
- null : { nbDatepickerFilter: true };
+ return !config.filter || !date || config.filter(date) ? null : { nbDatepickerFilter: true };
  }
 
  /**
@@ -451,37 +451,35 @@ export class NbDatepickerDirective<D> implements OnDestroy, ControlValueAccessor
  this.picker.init
  .pipe(
  take(1),
- tap(() => this.isDatepickerReady = true),
+ tap(() => (this.isDatepickerReady = true)),
  filter(() => !!this.queue),
  takeUntil(this.destroy$),
  )
  .subscribe(() => {
  this.writeValue(this.queue);
- this.onChange(this.queue);
  this.changeDetector.detectChanges();
  this.queue = undefined;
  });
  }
 
- this.picker.valueChange
- .pipe(takeUntil(this.destroy$))
- .subscribe((value: D) => {
- this.writePicker(value);
- this.writeInput(value);
- this.onChange(value);
+ this.picker.valueChange.pipe(takeUntil(this.destroy$)).subscribe((value: D) => {
+ this.writePicker(value);
+ this.writeInput(value);
+ this.onChange(value);
 
-  if (this.picker.shouldHide()) {
-  this.hidePicker();
-  }
-  });
+ if (this.picker.shouldHide()) {
+ this.hidePicker();
+ }
+ });
 
  merge(
  this.picker.blur,
  fromEvent(this.input, 'blur').pipe(
  filter(() => !this.picker.isShown && this.document.activeElement !== this.input),
  ),
- ).pipe(takeUntil(this.destroy$))
- .subscribe(() => this.onTouched());
+ )
+ .pipe(takeUntil(this.destroy$))
+ .subscribe(() => this.onTouched());
  }
 
  protected writePicker(value: D) {