angular - 如何以 react 形式退出递归调用 valueChanges

Question

我正在观察 formControl 的 valueChanges。表单控件是一个日期选择器。 When ever the date is selected, I am trying to reformat it to yyyy-MM-dd from original MM-dd-yyyy format.我是直接修改表单控件的值。所以它给了我一个递归调用错误。显然是真的。有什么解决办法吗？

代码:

this.parentForm.controls['myControlName'].valueChanges.subscribe((val)=>{
this.parentForm.controls['myControlName'].setValue(this._datePipe.transform(new Date(val), 'yyyy-MM-dd'));
});

<input #inputDate type="text" class="form-control" placeholder="Select date"
  [formControl]="parentForm.controls['myControlName']"
  [value]="selectedDate | date : 'MM-dd-yyyy'"/>
  <datepicker [ngModel]="selectedDate" [minDate]="minDate"
    [maxDate]="maxDate"
    [showWeeks]="false"
    [startingDay]="1"
    (selectionDone)="onSelectionDone($event)">
  </datepicker>

错误:

EXCEPTION: Error in ./DatePickerComponent class DatePickerComponent - inline template:13:8 caused by: too much recursion error_handler.js:54 ORIGINAL EXCEPTION: too much recursion

Answer 1

由于表单控件的setValue 方法默认会引发valueChange 事件，因此您会遇到死循环。您可以将 emitEvent 设置为 false 以防止它发生。

this.parentForm.controls['myControlName'].setValue(this._datePipe.transform(new Date(val), 'yyyy-MM-dd'), { emitEvent: false });