Autofill data in chrome of IOS is invalid. Using Angular2

Question

I am using templete driven forms in angular2. The developed form working fine in desktop and android, but when I autofill the form in chrome of iphone , the form is invalid. I also doubt that does using novalidate in form tag set autocomplete to off ? Below is my code.

<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>

Any help Please?

Answer 1

When we autofill the form in chrome for IOS, the autofill event is not triggered , and change event too. Its difficult to access form data thorough component properties. The only is to access the form element directly using 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. 

}
}