1

我在 angular2 中使用模板驱动形式。开发的表单在桌面和安卓系统中运行良好，但是当我在 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>

有什么帮助吗？

4

1 回答 1

4

当我们在 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. 

}
}
于 2017-02-04T13:34:27.160 回答