ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'false'. Current value: 'true'.
フォームが有効かどうかを確認した後、reactiveformからこのエラーが発生します。
creatForm
public createForm() {
this.loginForm = new FormGroup({
email: new FormControl('', [
Validators.required,
this.patternValidator(/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/)
]),
password: new FormControl('', [
Validators.required,
Validators.minLength(6)
])
});
this.guestForm = new FormGroup({
guestName: new FormControl('', [
Validators.required
]),
guestCode: new FormControl('', [
Validators.required,
Validators.minLength(8)
])
});
}
これがフォームです
<form [formGroup]="loginForm" (ngSubmit)="couplelogin(user)" novalidate>
<div id="couple_login_form" class="login-form">
<div class="login-field" [ngClass]="{'pattern' : !loginForm.controls.email.valid && loginForm.controls.email.touched, 'error' : loginForm.controls.email.pristine && loginForm.controls.email.touched, 'focus' : loginForm.controls.email.dirty}">
<label for="email_login" translate="HOME.EMAIL_FORM">E-Mail</label>
<input type="email" formControlName="email" [(ngModel)]="user.email" name="email">
<div class="message text-center">
<p translate="HOME.FORM_REQUIRED">This field is required</p>
</div>
<div class="pattern text-center">
<p translate="HOME.ERROR_FORMAT">Enter a valid email.</p>
</div>
</div>
<div class="login-field" [ngClass]="{'error' : loginForm.controls.password.pristine && loginForm.controls.password.touched, 'focus' : loginForm.controls.password.dirty}">
<label for="pass_login" translate="HOME.PASSWOR_FORM">Password</label>
<input type="password" [(ngModel)]="user.password" name="password" formControlName="password">
<div class="message text-center">
<p translate="HOME.FORM_REQUIRED">This field is required</p>
</div>
</div>
<p class="text-center bottom-msg-login" translate="HOME.FORM_MESSAGE">Don't have an account yet? Download the app für Android or iOS, sign in and create your wedding!</p>
<button class="submit" type="submit" name="couple" [disabled]="!loginForm.valid" translate="HOME.LOGIN">Login</button>
</div>
</form>
現在、ユーザーの認証にFirebaseを使用しており、Angular 4でメールフィールドを検証していますが、メールフォームがFirebaseで正しいかどうかを確認する検証を行うと、エラーはなくなります。
検証メールの場合、これを行うことができます
'email': [null, [
Validators.required, Validators.email
]],
その後、すべて[(ngModel)]="user.XXX"
を削除し、name="XXX"
と変更
<form [formGroup]="loginForm" (ngSubmit)="couplelogin(loginForm.value)">
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加