英文:
Angular Forms: Browser Password Manager
问题
我有一个Angular项目，版本是13，使用Angular响应式表单来实现登录页面，类似于以下内容：
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'test-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {
formGroup: FormGroup;
get isFormValid() {
return this.formGroup.valid;
}
constructor(private fb: FormBuilder) {}
ngOnInit() {
this.formGroup = this.fb.group({
username: [null, Validators.required],
password: [null, [Validators.required, Validators.minLength(8)]]
});
}
}
如果用户在浏览器中保存了登录凭据并重新加载页面，则`isFormValid`仍然为`false`，直到用户在页面上任何位置点击。客户对此不满意，希望在从浏览器的密码管理器中填充凭据时启用登录按钮。
英文:
I have an Angular project, version 13, that uses the Angular Reactive Forms for the login page, something like this:
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'test-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {
formGroup: FormGroup;
get isFormValid() {
return this.formGroup.valid;
}
constructor(private fb: FormBuilder) {}
ngOnInit() {
this.formGroup = this.fb.group({
username: [null, Validators.required],
password: [null, [Validators.required, Validators.minLength(8)]]
});
}
}
The login button remains disabled if isFormValid is false, and this works fine.
However, when the user saved the login credentials in the browser and reloads, isFormValid remains false until the user clicks anywhere on the page.
The client is not happy about this and would like the login button to be enabled if the credentials were populated from the browser's password manager.
答案1
得分: 1
尝试在页面的 AfterViewInit 中模拟点击。
JavaScript：
public ngAfterViewInit(): void {
document.querySelector('body').click();
}
或者
在你的HTML输入框上加上 autocomplete="new-fieldName"。
示例：
只需在你的HTML控件上加上 autocomplete="new-formControl"，这样可以阻止浏览器自动填充你的输入框。
<input autocomplete="new-username"
formControlName="username" name="username" type="text">
<input autocomplete="new-password"
formControlName="password" name="password" type="password">
英文:
Try simulating a Click on the page AfterViewInit.
JavaScript :
public ngAfterViewInit(): void {
document.querySelector('body').click();
}
Or
Put autocomplete="new-fieldName" on Your html inputs.
Example :
Just put autocomplete="new-formControl" on Your html controls which will prevent Browser to autofill Your inputs.
<input autocomplete="new-username"
formControlName="username" name="username" type="text">
<input autocomplete="new-password"
formControlName="password" name="password" type="password">
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论