ExpressionChangedAfterItHasBeenCheckedError：表达式在角度检查后发生了变化

Question

我是角度的初学者，我正在尝试使用代码构建表单验证我的要求是当我点击重置按钮字段需要重置为此我按照下面的代码但问题是我点击在重置按钮我得到以下异常可以有人帮助我，请问我在哪里做mi-stack

home.html的：

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import {FormBuilder, FormGroup, Validators, AbstractControl} from '@angular/forms';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  username:string;
  password:string;

  authForm : FormGroup;
  constructor(public navCtrl: NavController, public navParams: NavParams, private fb: FormBuilder) {
    this.authForm = fb.group({
          'username' : [null, Validators.compose([Validators.required])],
          'password': [null, Validators.compose([Validators.required, Validators.minLength(8)])],
          'gender' : 'e'
        });
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad');
  }

  myFunc1(){
    console.log('Form submitted!')
  } 

  myFunc2(){
    this.username='';
    this.password='';
  }
}

home.ts：

const webconfig = require("webconfig");

let WEB_API_URL = 'a';
let WEB_APP_URL = 'b';

webconfig
    .compile({
        sources: [
            __dirname + '/Web.config'
        ]
    })
    .then(config => {
        WEB_API_URL = config.appSettings['__API_URL__'];
        WEB_APP_URL = config.appSettings['__APP_URL__'];
    });

 module.exports = {
//...
 plugins: [
        new webpack.DefinePlugin({
            __API_URL__: JSON.stringify(WEB_API_URL),
            __APP_URL__: JSON.stringify(WEB_APP_URL)
        })
}

例外：

  

ExpressionChangedAfterItHasBeenCheckedError：表达式在检查后发生了变化。        上一个值：'error-border：false'。当前值：'error-border：true'。

Answer 1

在重置功能myFunc2中，使用内置表单重置功能：

myFunc2() {
  this.authForm.reset();
}

Here is a StackBlitz example

（作为旁注，您可能也想重命名该功能......）