FWIW, у меня была такая же проблема, см. Мой обходной путь ниже.
Я использую реактивные формы, и у меня возникла проблема в форме входа в систему, когда у меня есть только имя пользователя и пароль.Я реализовал обходной путь, при котором я подписываюсь на изменения в форме, а затем определяю, равно ли собственное значение пароля полю поля формы пароля во время изменения (технически через 500 мс после изменения, чтобы дождаться, пока автозаполнение не введет значение пароля).Если они разные, я вручную переопределяю значение формы на собственное значение, которое запускает проверку формы.
Надеюсь, это кому-нибудь поможет!
// login-form.component.ts
import { Component, ViewChild, ElementRef } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
@Component({
selector: 'app-login-form',
template: require('./login-form.component.pug')(),
styleUrls: ['./login-form.component.scss'],
})
export class LoginFormComponent {
protected loginForm: FormGroup;
@ViewChild('password') public passwordRef: ElementRef;
constructor(private _formBuilder: FormBuilder) {
this.loginForm = this.getForm();
// NOTE: this hack triggers form validation on iOS autofill
this.loginForm.valueChanges
// wait for 500ms to be sure the autofill is finished with the password field
.debounceTime(500)
.subscribe((changes) => {
// manually fetch the value from nativeElement
let passVal = this.passwordRef.nativeElement.value; //(<HTMLInputElement>document.querySelector('[name="password"]')).value;
// if the value saved in the form is different from the input, manually update it
if (passVal !== changes.password) {
this.loginForm.get('password').setValue(passVal);
}
})
;
// NOTE: this hack triggers form validation on iOS autofill
}
protected getForm(): FormGroup {
return this._formBuilder.group({
username: ['', [
Validators.required,
Validators.email,
]],
password: ['', [
Validators.required,
]],
});
}
public onSubmit(login: FormGroup) {
// ...
}
}
// login-form.component.pug
// NOTE: pug + bootstrap 4
h1 Login
form([formGroup]="loginForm", (ngSubmit)="onSubmit(loginForm)")
.form-group
input.form-control(
formControlName="username",
name="username",
type="email",
placeholder="Username",
autocomplete="on",
autocorrect="off",
autocapitalize="off",
spellcheck="false",
)
.form-group
input.form-control(
#password,
formControlName="password",
name="password",
type="password",
placeholder="Password",
autocomplete="on",
autocorrect="off",
autocapitalize="off",
spellcheck="false",
)
input.mb-3.btn.btn-lg(
type="submit",
value="Login",
[class.btn-outline-primary]="loginForm.valid",
[class.btn-outline-secondary]="!loginForm.valid",
[disabled]="!loginForm.valid",
)