入力フィールドがあらかじめ入力されている場合、フィールドは無効です

Question

私は電子メールを入力して電子メールを確認し、次のページに進み、すべて正常です。ページが最初に読み込まれ、それがユーザーの初めての場合、入力フィールドはCookieデータから事前入力されないため、検証は正常に機能します。ただし、ユーザーが戻ると、入力フィールドのデータはCookieデータから事前に作成されていますが、事前入力テキストが有効な形式であっても送信ボタンは無効です。要素を調べたところ、有効な書式であってもフィールドが無効であると思われるようです。

フィールドとバックスペースのいずれかに移動して最後の文字を削除し、以前と同じ文字をメールに挿入して次のフィールドで同じことを行うと、フォームが再び有効になりました。それでも以前と同じテキストです。

フォームが最初に読み込まれたときに検証が失敗するのはなぜですか？

ここに私のコードです：

export class EmailComponent implements OnInit { 

    public user : User; 
    Form : FormGroup; 
    displayErrors : boolean; 

    ngOnInit() { 
     // initialize model here 
     this.user = { 
      Email: '', 
      confirmEmail: '' 
     } 
    } 

    constructor(fb: FormBuilder, private cookieService: CookieService, private cryptoService: CryptoService) { 


     var encryptedEmail = this.cookieService.get(AppCookie.EmailAddress); 

     var Cookie = null; 

     if(encryptedEmail != null && encryptedEmail != 'undefined') 
      Cookie = this.cryptoService.Decrypt(encryptedEmail); 


     if(Cookie == null) { 
      this.Form = fb.group({ 
       email: ['', [Validators.required, Validators.pattern(EMAIL_REGEXP)]], 
       confirmEmail: ['', [Validators.required, Validators.pattern(EMAIL_REGEXP)]] 
      }, 
      { 
       validator: this.matchingEmailsValidator('email', 'confirmEmail') 
      }); 

     } 
     else { 
      this.Form = fb.group({ 
       email: [Cookie, [Validators.required, Validators.pattern(EMAIL_REGEXP)]], 
       confirmEmail: [Cookie, [Validators.required, Validators.pattern(EMAIL_REGEXP)]] 
      }, 
      { 
       validator: this.matchingEmailsValidator('email', 'confirmEmail') 
      }); 

     } 
    } 

    save(model: User, isValid: boolean) 
    { 

     model.Email = this.Form.get('email').value; 

     var encrypted = this.cryptoService.Encrypt(model.Email); 

     this.cookieService.put(AppCookie.EmailAddress, encrypted); 
    } 

    matchingEmailsValidator(emailKey: string, confirmEmailKey: string): ValidatorFn { 
     return (group: FormGroup): {[key: string]: any} => { 

      let email = group.controls[emailKey]; 
      let confirmEmail = group.controls[confirmEmailKey]; 

      if (email.value !== confirmEmail.value) { 
       return {      
        mismatch: true 
       }; 
      } 
     }; 
    } 
} 

、ここでは、私の見解です：

<form [formGroup]="Form" novalidate (ngSubmit)="Form.valid && save(Form.value, Form.valid)"> 

    <div class="login-wrapper"> 
     <div class="login-page"> 

      <section class="login-form form-group"> 
       <p> 
       <input id="email" 
       [class.email-address-entry]="!displayErrors" 
       [class.email-address-entry-text]="!displayErrors && this.Form.get('email').value !='' " 
       type="email" 
       placeholder="name@domain.com" formControlName="email" /> 
       </p> 

       <p class="login-form__msg">Reenter your email to confirm</p> 

       <input id="reenteremail" 
       [class.email-address-entry]="!displayErrors" 
       [class.entry-border-invalid]="displayErrors && !Form.valid && Form.errors?.mismatch" 
       [class.email-address-entry-text]="!displayErrors && this.Form.get('email').value !='' " 
       (blur)="displayErrors=true" 
       type="email" placeholder="name@domain.com" 
       formControlName="confirmEmail"/> 
       <p class="error-msg" *ngIf="displayErrors && !Form.valid && Form.errors?.mismatch">The email you entered does not match.</p> 

      </section> 

       <p class="login-confirm"> 
        <span> 
        <button type="submit" [disabled]="!Form.valid" (click)="Form.get('email').length > 0 ? save(Form.value, Form.valid) : NaN">Confirm</button> 
        </span> 
       </p> 
     </div> 

    </div> 
    </form> 

EDIT：それは、この問題に似ています：

Angular 2 - Form is invalid when browser autofill

私はこれを追加してみました：

ngAfterViewChecked() { 

     if (Cookie) { 
      // enable to button here. 
      var element = <HTMLInputElement> document.getElementById("confirmBtn"); 
      element.disabled = false; 

     } 

フィールドはまだ無効なので、動作しません。手動で再検証を設定するか、ng-invalidをng-validに変更する方法が必要です。

Answer 1

フォームのインスタンスへの参照（反応性フォームを使用するか、@ViewChildを使用してアクセスすることによりどちらか）あなたは（ngAfterViewInitに次のように書くことができるはずです）続ける場合：

for (var i in this.form.controls) { 
    this.form.controls[i].updateValueAndValidity(); 
} 

それともマーキングを

for (var i in this.form.controls) { 
    this.form.controls[i].markAsTouched(); 
}