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

Question

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

有什么帮助吗？

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. 

}
}

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

Autofill data in chrome of IOS is invalid. Using Angular2

autofill

angular2-forms

ngmodel

angular