Angular 9 - 如果浏览器自动填充输入，则表单无效 onInit

Question

所以我注意到很多关于这个的话题，但都比较老，而且没有官方的解决方案。也许现在有解决这个问题的方法。但基本上如果你有一个带有用户名输入字段的表单，当页面第一次加载时，如果浏览器自动填充该值(因为你在浏览器中保存了你的凭据)，“login”按钮将仍然被禁用，因为在用户第一次点击任何地方之前表单仍然无效。

我找到的最新提议的解决方案是使用 Angular 官方:AutofillMonitor但它不起作用:

 @ViewChild("email") inputEl: ElementRef;

constructor(
    private formBuilder: FormBuilder,
    private _autofill: AutofillMonitor
  ){
    this.emailForm = this.formBuilder.group(
      {
        userLogin: [
          "",
          {
            validators: [Validators.required],
          },
        ],
        password: [
          "",
          {}
        ]
      }
    );
  }

ngAfterViewInit() {
    this._autofill.monitor(this.inputEl)
    .subscribe(e => {
        if (e.isAutofilled) {
          // this works, the code gets in here onInit
        this.forceValidityCheck();
        }
      }
    );
  }

forceValidityCheck() {
    this.emailForm.controls["userLogin"].updateValueAndValidity();
  }

HTML 代码:

<ng-container>
      <form [formGroup]="emailForm" (ngSubmit)="checkAndLoadUserInfo(emailForm.get('userLogin').value)">
      <mat-form-field appearance="standard" class="standardInputField">
        <mat-label translate>enter_email.username</mat-label>
        <input matInput formControlName="userLogin" #email type="email" placeholder="name@example.org" (keyup.enter)="checkAndLoadUserInfo(emailForm.get('userLogin').value)" autofocus autocomplete="username">
        <label class="pswValidationLabels" *ngIf="emailForm.get('userLogin').hasError('doesNotExist')" translate>
          enter_email.unknown_user
          </label>
      </mat-form-field>

      <mat-form-field appearance="standard" class="hiddenFormField">
      <input matInput type="password" autocomplete="current-password">
      </mat-form-field>

      <div>
        <button [disabled]="!emailForm.get('userLogin').valid" mat-raised-button>
        </button>
      </div>
    </form>
    </ng-container>

但即使这样表单仍然无效，直到用户点击屏幕上的任意位置，然后它才有效。

有官方解决方案吗？

Answer 1

我确实看到了一些可能有帮助的批准，因为我没有遇到您的问题。

首先，您将提交按钮的禁用属性仅绑定(bind)到用户名字段而不是整个表单的有效性？

此外，我认为您的 ngSubmit 以这种方式维护可能有点困难，因为您再次明确使用用户名字段值来传递，而整个表单在 TS 文件中可供您使用。因此 checkAndLoadUserInfo() 不应需要参数。

然后我相信表单构建是创建响应式表单的“旧”方式，您是否看到可以创建表单控件？它的工作方式相同:

this.newGameForm = new FormGroup({
    userLogin: new FormControl('', [
        Validators.required
    ])
});

现在我经常做的是创建一个名为 initForm() 或类似名称的函数，然后从 ngOnInit() 中调用它。完成后，您就有了一个表单实例。您现在可以通过像这样设置表单值来轻松地操作它们:

this.formName.patchValue({ userLogin: 'new value'});

如果您应该已经能够在初始化表单时从某处获取值，您还可以使用第一个参数来创建在所需字段中具有初始值的表单。这两种方式都会触发验证并更新表单的状态。