角度4の式がチェックされた後に変更されたエラー

Question

フォームが有効であることを確認した後に、このエラーExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'false'. Current value: 'true'.をreactformから取得します。

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を使用して - 私、角度で電子メールのフィールドを検証する - 私であります4、しかし、私は電子メールformartがfirebaseと正しい場合、私は検証を確認するエラーは、すべてのアイデアがなくなっている。

Answer 1

検証、電子メールの場合、あなたはこの1

'email': [null, [ 
     Validators.required, Validators.email 
    ]], 

は、すべて[(ngModel)]="user.XXX"とname="XXX"

を削除し、私はまだその方法が、電子メールの検証をしよう

<form [formGroup]="loginForm" (ngSubmit)="couplelogin(loginForm.value)">