ExpressionChangedAfterItHasBeenCheckedError:表达式在检查后发生了变化。以前的价值:' true'。当前价值:' false'

时间:2018-04-17 14:00:56

标签: angular2-forms angular2-directives angular-reactive-forms angular4-forms angular2-changedetection

我有一个剑道日期选择器和一个div,显示"必需"以角度4反应形式发送的消息。

<kendo-datepicker #datePicker=appDateFormat
                          [(value)]="questionControlInfoData.currentValue"
                          [format]="dateFormat"                                         
                          [formatPlaceholder]="{ year: 'yyyy', month: 'mm', day: 'dd' }"
                          [formControlName]="questionControlInfoData.formControlName" [disabled]="questionControlInfoData.disabledControl"
                          [appDateFormatOnly]="dateValidationFormat"> </kendo-datepicker>
 <div> <span *ngIf="!isValid()" [class.star]="!isValid()">This field is required</span> </div>

反应式表单正在动态加载控件。

&#34; appDateFormatOnly&#34;是用于日期格式验证的指令。

我有一个方法&#34; isValid()&#34;,它根据某些条件返回一个布尔值。

isValid() {

        var dateValue = this.qnaFormGroup.controls[this.questionControlInfoData.formControlName].value;
        var hasDateValue = (dateValue !== undefined && dateValue !== "");

        if (hasDateValue && !this.datePickerDirective.isValid) {

            this.qnaFormGroup.controls[this.questionControlInfoData.formControlName].setErrors({ 'invalidDate': true });
        }


        var isValid = this.qnaFormGroup.controls[this.questionControlInfoData.formControlName].touched ? this.qnaFormGroup.controls[this.questionControlInfoData.formControlName].valid
            : this.qnaFormGroup.controls[this.questionControlInfoData.formControlName].dirty ? this.qnaFormGroup.controls[this.questionControlInfoData.formControlName].valid : true;

        return hasDateValue || isValid;
    }

在这个&#34; isValid()&#34;方法我使用&#34; setErrors&#34;基于某些条件向控件添加错误angular4方法。

在&#34; isValid()的&#34;如果这种反应形式发生任何变化,就会被调用。

问题是:

有时我在日期选择器中输入日期值时收到错误"ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'true'. Current value: 'false'."

我已经分析并发现问题在于使用&#34; setErrors&#34;在表单控件中添加错误。方法

请问有人为此问题提供任何解决方案。

0 个答案:

没有答案