IOS chrome中的自动填充数据无效。使用 Angular2答案

【问题标题】：Autofill data in chrome of IOS is invalid. Using Angular2IOS chrome中的自动填充数据无效。使用 Angular2
【发布时间】：2017-06-11 15:04:12
【问题描述】：

我在 angular2 中使用模板驱动形式。开发的表单在桌面和android中工作正常，但是当我在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>

有什么帮助吗？

【问题讨论】：

标签： angular angular2-forms autofill ngmodel

【解决方案1】：

当我们在 chrome 中为 IOS 自动填充表单时，不会触发自动填充事件，也会触发更改事件。很难通过组件属性访问表单数据。唯一的方法是直接使用 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. 

}
}

【讨论】：