如何进一步封装一个表单域组件？答案

【问题标题】：how to further encapsulate one form field component?如何进一步封装一个表单域组件？
【发布时间】：2019-02-13 05:47:02
【问题描述】：

现在我在很多地方使用 ngx-daterangepicker-material 并带有以下重复代码，我想封装为独立组件以供重用。

<div class="fx-date-range-container">
  <span class="summary">Summary</span>
  <input class="fx-date-range" type="text" matInput
         ngxDaterangepickerMd
         [locale]="{applyLabel: 'ok', format: 'MM-DD-YYYY'}"
         [drops]="'down'"
         [opens]="'right'"
         [ranges]="ranges"
         [showCustomRangeLabel]="false"
         [alwaysShowCalendars]="true"
         [keepCalendarOpeningWithRange]="true"
         [showCancel]="true"
         autocomplete="off"
         [(ngModel)]="selectedDateRange"
         (change)="getCampaignFXASummary()"
         name="daterange"/>
  <mat-icon class="icon-date-range" matSuffix>keyboard_arrow_down</mat-icon>
</div>

组件名称为 fx-date-range-picker。这是演示，我的问题是如何设置 ngModel 并将值传递给 fx-date-range-picker 组件。

也许我应该实现 writeValue 函数，但不知道怎么写。

https://ngx-daterangepicker-material-demo.stackblitz.io

【问题讨论】：

标签： angular

【解决方案1】：

你需要实现 ControlValueAccessor

请参阅angular.io 关于它的文档 ControlValueAccessor

要实现的函数应该如下所示：

  export class [yourClass] implements ControlValueAccessor {      
  protected onChange: (value: any) => void = NOOP;
  protected internalValue: number;

  get value(): number {
    return this.internalValue;
  }

  set value(value: number) {
    if (value !== this.internalValue) {
      this.internalValue = value;
      this.onChange(value);
    }
  }

  writeValue(value) {
    this.value = value;
}
registerOnChange(fn) { this.onChange = fn;  }
registerOnTouched(fn) {  }

请参阅下面的解释它的帖子： https://blog.angularindepth.com/never-again-be-confused-when-implementing-controlvalueaccessor-in-angular-forms-93b9eee9ee83

祝你好运！

【讨论】：