ExpressionChangedAfterItHasBeenCheckedError: Выражение изменилось после проверки в угловых

Question

Я новичок в угловых и пытаюсь построить валидацию форм, используя код. Мое требование - когда я нажал Сброс Поля кнопки должны быть сброшены для этого. Я следовал приведенному ниже коду, но проблема в том, когда я нажал на Кнопка сброса Я получаю ниже исключения, может кто-нибудь помочь мне, пожалуйста, где я сделал mi-стек

home.html:

<ion-content padding>

  <h1>Authentication Demo</h1>
  <hr align="left" width="30%">

  <form [formGroup]="authForm">
    <ion-item>
      <ion-label floating>Username</ion-label>
      <ion-input type="text" [(ngModel)] ="username" value="" [formControl]="authForm.controls['username']" [ngClass]="{'error-border':!authForm.controls['username'].valid}"></ion-input>
    </ion-item><br/>
    <div class="error-box" *ngIf="authForm.controls['username'].hasError('required') && authForm.controls['username'].touched">* Username is required!</div>
    <ion-item>
      <ion-label floating>Password</ion-label>
      <ion-input type="password" [(ngModel)] ="password" value="" [formControl]="authForm.controls['password']"></ion-input>
    </ion-item><br/>
    <div class="error-box" *ngIf="authForm.controls['password'].hasError('required') && authForm.controls['password'].touched">* Username is required!</div>
    <div class="error-box" *ngIf="authForm.controls['password'].hasError('minlength') && authForm.controls['password'].touched">* Minimum username length is 8!</div>
    <div class="error-box" *ngIf="authForm.controls['password'].hasError('checkFirstCharacterValidatorOutput') && authForm.controls['password'].touched">* Password cant't start with number!</div><br/>
    <ion-list>
      <ion-item>
        <ion-label>Gender</ion-label>
        <ion-select [formControl]="authForm.controls['gender']">
          <ion-option value="e">Other</ion-option>
          <ion-option value="f">Female</ion-option>
          <ion-option value="m">Mele</ion-option>
        </ion-select>
      </ion-item>
    </ion-list><br/>

    <button type="submit" ion-button full [disabled]="!authForm.valid" (click)="myFunc1()">Submit</button>
    <button type="submit" ion-button full [disabled]="!authForm.valid" (click)="myFunc2()">Reset</button>

  </form>

</ion-content>

home.ts:

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='';
  }
}

Исключение:

ExpressionChangedAfterItHasBeenCheckedError: Выражение изменилось после его проверки.Предыдущее значение: 'error-border: false'.Текущее значение: 'error-border: true'.

Answer 1

В вашей функции сброса myFunc2 используйте встроенную функцию сброса формы:

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

Вот пример StackBlitz

(Как примечание, вы, вероятно, хотите переименовать и эту функцию ...)