如何在响应式表单valueChanges中退出递归调用

时间:2018-04-24 08:26:45

标签: angular recursion angular-forms

我正在观察formControl' valueChanges。表单控件是date picker。如果选择了日期,我会尝试将其从原始yyyy-MM-dd格式重新格式化为MM-dd-yyyy。我正在直接修改表单控件值。所以它给了我一个递归调用错误。显然是真的。有没有解决这个问题?

代码:

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:./DatePickerComponent类出错   DatePickerComponent - 内联模板:13:8也是由:引起的   很多递归error_handler.js:54原始异常:太多了   递归

1 个答案:

答案 0 :(得分:2)

由于表单控件的setValue方法默认会导致valueChange事件,因此您将遇到死循环。您可以将emitEvent设置为false以防止它出现。

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