IOSのChromeの自動入力データが無効です。 Angular2を使用する

Question

私はangle2でtemplete駆動型を使用しています。開発されたフォームはデスクトップやアンドロイドでうまく動作しますが、iPhoneのChromeでフォームを自動入力するとフォームが無効になります。私はまた、フォームタグでオートコンプリートをオフに設定してnovalidateを使用していないのだろうか？ 以下は私のコードです。

<form #form="ngForm" (ngSubmit)="form.valid && onSubmit(form)" novalidate> 
    <input id="firstName" #firstName="ngModel" [(ngModel)]="firstName" type="text" name="firstName" 
     placeholder="*First Name" pattern="[a-zA-Z][a-zA-Z0-9\s]*" 
     [class.has-error]="firstName.invalid && form._submitted" maxlength="40" autocomplete="on" required> 
    <input id="lastName" #lastName="ngModel" [(ngModel)]="lastName" type="text" name="lastName" 
     placeholder="*Last Name" pattern="[a-zA-Z][a-zA-Z0-9\s]*" 
     [class.has-error]="lastName.invalid && form._submitted" maxlength="80" autocomplete="on" required><br> 
    <input id="email" type="email" #email="ngModel" name="email" [(ngModel)]="localLeader.email" 
     pattern="[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$" placeholder="*Email" 
     [class.has-error]="email.invalid && form._submitted" maxlength="80" autocomplete="on" required><br> 
    <input type="checkbox" name="isLocal" [(ngModel)]="isLocal"> 
    <div class="indicator"></div> 
    <span id="monthly"> Local</span> 
    <button class="sc-btn" type="submit">GET DATA</button> 
</form> 

お願いします。

Answer 1

IOSのChromeでフォームを自動入力すると、自動入力イベントは発生せず、イベントも変更されます。フォームデータにアクセスするのは難しいです。唯一のことは、ViewChildを使用してフォーム要素に直接アクセスすることです。

import {AfterViewInit, Component, Directive, ViewChild} from '@angular/core'; 

export class someComponent { 

ViewChild('firstName') firstName: nativeElement; 

ngAfterViewInit() { 
// firstname can be set here. 
} 
processForm() { 
let firstName = this.firstName.nativeElement.value; 
// same for rest of the fields. 

} 
}