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

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

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

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

那么我相信表单构建在某种程度上是创建响应式表单的“旧”方式，您是否看到可以创建表单控件？它的工作方式相同：

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

现在我总是做的是创建一个名为initForm() 或类似的函数，然后从ngOnInit() 调用它。完成后，您就有了表单的一个实例。您现在可以通过如下设置轻松操作表单值：

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

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