![](/img/trans.png)
[英]Angular 4: `ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked
[英]ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked in angular
我是angular的初學者,我嘗試使用代碼構建表單驗證,我的要求是,當我點擊“ 重置”按鈕字段時需要為此進行重置,我遵循以下代碼,但是問題是,當我點擊“ 重置”按鈕時,我遇到了以下異常問題請幫我,我在哪里做我堆棧
<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>
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”。 當前值:“錯誤邊界:true”。
在您的重置功能myFunc2
,使用內置的表單重置功能:
myFunc2() {
this.authForm.reset();
}
(作為補充,您可能還想重命名該函數...)
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.