当输入字段预填充字段是无效的

Question

我有一个表格，我输入一个电子邮件，确认电子邮件，然后继续到下一个页面，一切都很好。当页面最初加载并且它是用户的第一次时，验证工作正常，所以输入字段不会从cookie数据预填充。但是，当用户返回时，输入字段数据是从cookie数据预填充的，这很好，但即使预先填充的文本是有效格式，提交按钮仍然被禁用。我检查了这些元素，似乎认为该字段是ng-invalid，即使它是有效的格式。

我注意到，当我去的领域之一，退格为之前删除的最后一个字符，然后重新插入相同的字符的电子邮件，并在接下来的一个领域一样，形式再次有效。尽管如此，它和以前一样。

我想知道为什么验证失败时窗体第一次加载预填充数据？

这里是我的代码：

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> 

编辑：这是类似这样的问题还有：

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(); 
}