NgbDatePicker внутри пользовательского компонента, как распространять валидаторы и стили? - PullRequest
Новая
       16

NgbDatePicker внутри пользовательского компонента, как распространять валидаторы и стили?

1 голос
/ 17 мая 2019

У меня есть пользовательский компонент Angular 7 для упаковки ng-bootstrap NgbDatePickerInput. 

form = this.fb.group({
  date2: [null, Validators.required]
});

<date-editor formControlName="date2"></date-editor>

Как я могу распространить formControl Validator.required на этот внутренний компонент? Так, чтобы пустой текст был недопустимым, а <input> был применен стиль nb-invalid, точно так же, как если бы средство выбора даты не было в пользовательском элементе управления.

Stackblitz воспроизведение моей проблемы .

Мой пользовательский компонент: 

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

@Component({
  selector: 'date-editor',
  template: `
        <input class="form-control" placeholder="mm/dd/yyyy" [(ngModel)]="value" ngbDatepicker #dp="ngbDatepicker" container="body" (focus)="dp.open()" (dateSelect)="update($event)">
  `,
  providers: [{
    provide: NG_VALUE_ACCESSOR,
    useExisting: DateEditorComponent,
    multi: true
  }]
})
export class DateEditorComponent implements ControlValueAccessor {
  value;

  propagateChange = (_: any) => { };

  writeValue(obj: any): void {
    this.value = obj;
  }

  registerOnChange(fn: any): void {
    this.propagateChange = fn;
  }

  registerOnTouched(fn: any): void { }

  update($event) {
    this.propagateChange($event);
  }
}

Я видел этот другой пост и пытался работать с ним, но безуспешно. Очистка текста input не вызовет состояние ng-invalid.

1 Ответ

0 голосов
/ 17 мая 2019

Попробуйте изменить это: 

(dateSelect)="update($event)"

на это: 

(ngModelChange)="update($event)"

Вот обновленная демоверсия.

Обновление:

Добавить обязательный атрибут во внутреннее поле ввода.

Демонстрация 2

...