自定义组件内的 NgbDatePicker，如何传播验证器和样式？

Question

我有一个 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 reproduction of my problem.

我的自定义组件是：

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 状态。

Answer 1

尝试改变这个：

(dateSelect)="update($event)"

对此：

(ngModelChange)="update($event)"

Here is the updated demo.

更新：

向内部输入字段添加一个必需的属性。

Demo 2

自定义组件内的 NgbDatePicker，如何传播验证器和样式？

NgbDatePicker inside a custom component, how to propagate validators and styles?

ng-bootstrap

angular