ControlValueAccessor:永远不会调用registerOnChange()

时间:2018-12-13 15:34:25

标签: angular typescript

我正在构建一个使用registerOnChange()界面的Angular 7应用程序,以使我的控件在Reactive Forms中正常运行。不幸的是,@Component({ selector: 'wp-date-picker', templateUrl: './date-picker.component.html', styleUrls: [ './date-picker.component.scss' ], providers: [ { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DatePickerComponent), multi: true } ] }) export class DatePickerComponent implements OnInit, ControlValueAccessor { onChange = (date: Date) => {}; onTouched = () => {}; writeValue(date: Date): void { if (date) { date = new Date(date); this.day = date.getDate(); this.month = date.getMonth(); this.year = date.getFullYear(); } } get value(): Date { return new Date(Date.UTC(this.year, this.month, this.day)); } registerOnChange(fn: (date: Date) => void): void { // never being called this.onChange = fn; } } 从未被调用,因此我无法“观察”控件的值。

我控件的相关来源如下:

@Component({
  selector: 'wp-retirement-age',
  templateUrl: './retirement-age.component.html',
  styleUrls: [ './retirement-age.component.scss' ]
})
export class RetirementAgeComponent implements OnInit {
  form: FormGroup;

  constructor(private fb: FormBuilder) {
  }

  ngOnInit() {
    this.form = this.fb.group({
      retirementDate: [ this.product.retirementDate ],
      retirementAge: [ this.product.retirementDate ]
    });

    this.retirementDateCtrl.registerOnChange((newValue) => {
      this.retirementAgeCtrl.setValue(newValue);
    });

    this.retirementAgeCtrl.registerOnChange((newValue) => {
      this.retirementDateCtrl.setValue(newValue);
    });
  }

  get retirementDateCtrl() {
    return this.form.get('retirementDate') as FormControl;
  }

  get retirementAgeCtrl() {
    return this.form.get('retirementAge') as FormControl;
  }
}

及其包含的组件如下所示:

<form class="retirement-age-form" [formGroup]="form">
  <div class="row">
    <div class="col-3 col-md-4 col-lg-3">
      <div [innerHtml]="content?.wantToRetire" class="options-title"></div>
    </div>
    <div class="col-3 col-md-4 col-lg-6">
      <wp-date-picker
        [maxDate]="maxDate"
        [minDate]="minDate"
        formControlName="retirementDate"
      ></wp-date-picker>
    </div>
  </div>
</form>

我的组件具有以下HTML:

this.retirementDateCtrl.registerOnChange()

this.retirementAgeCtrl.registerOnChange()registerOnChange()都没有真正到达控件的l=bipartite.weighted_projected_graph(g3,movies) 方法,因此从未执行过回调。我想念什么?

0 个答案:

没有答案
相关问题