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

【问题标题】：NgbDatePicker inside a custom component, how to propagate validators and styles?自定义组件内的 NgbDatePicker，如何传播验证器和样式？
【发布时间】：2019-05-17 19:02:25
【问题描述】：

我有一个 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);
  }
}

我见过this other SO post 并尝试使用它，但没有成功。清除input 文本不会触发ng-invalid 状态。

【问题讨论】：

标签： angular ng-bootstrap

【解决方案1】：

尝试改变这个：

(dateSelect)="update($event)"

到这里：

(ngModelChange)="update($event)"

Here is the updated demo.

更新：

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

Demo 2

【讨论】：

清除文本框时确实会更新模型，但 css 类仍然是 <input class="form-control ng-valid ng-touched ng-dirty"...。我希望它变成ng-invalid 以获得视觉反馈。
@dstj 只需在输入中添加一个必需的属性。稍后会更新到演示。
@dstj 如果您希望样式也向下传递到子组件，那么将 .form-control.ng-invalid 更改为 ::ng-deep .form-control.ng-invalid
谢谢。演示 2 链接似乎已损坏。我会尝试使用::ng-deep，但我想我看到它已被弃用...
@dstj 修复了链接并删除了::ng-deep。