Когда поле ввода предварительно заполнено, поле недействительно

Question

У меня есть форма, где я ввожу письмо и подтверждаю электронное письмо, а затем перехожу на следующую страницу, и все в порядке. Проверка правильности работы выполняется при первоначальной загрузке страницы, и это первый пользовательский интерфейс, поэтому поле ввода не предварительно заполнено данными cookie. Однако, когда пользователь возвращается, данные поля ввода предварительно заполняются из данных cookie, и это нормально, но кнопка отправки по-прежнему отключена, даже несмотря на то, что предварительно заполненный текст является допустимым форматом. Я проверил элементы и, похоже, считает, что поле является ng-invalid, даже если это допустимый формат.

Я заметил, что когда я перехожу в одно из полей и backspace, чтобы удалить последний символ и снова вставить тот же символ, что и раньше, для электронной почты и сделать то же самое для следующего поля, форма снова будет действительна. Несмотря на это, это тот же текст, что и раньше.

Мне интересно, почему проверка не выполняется, когда форма сначала загружается с предварительно заполненными данными?

Вот мой код:

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