angular 登录页表单禁止自动填充的另一种方式

核心思路就是利用 disabled 的变化，取消浏览器自动填充

灵感参考这个 （Form表单自动填充）浏览器自动填充表单很恶心怎么去掉，很恶心_风吹蛋蛋飘~的博客-CSDN博客

// login.component.html
<form nz-form [formGroup]="_form" (ngSubmit)="submit()" role="form" style="padding-top: 50px">
  <nz-alert *ngIf="error" [nzType]="'error'" [nzMessage]="error" [nzShowIcon]="true" class="mb-lg"></nz-alert>
  <nz-form-item>
    <nz-form-control nzErrorTip="{{ 'app.login.message-no-input-account' | translate }}">
      <nz-input-group nzSize="large" nzPrefixIcon="user">
        <input nz-input formControlName="account" placeholder="{{ 'app.login.placeholder.account' | translate }}" />
      </nz-input-group>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-control nzErrorTip="{{ 'app.login.message-no-input-password' | translate }}">
      <nz-input-group nzSize="large" nzPrefixIcon="lock" [nzSuffix]="suffixTemplate">
        <input
          nz-input
          [type]="passwordVisible ? 'text' : 'password'"
          formControlName="password"
          [autofocus]="false"
          placeholder="{{ 'app.login.placeholder.password' | translate }} "
        />
      </nz-input-group>

      <ng-template #suffixTemplate>
        <i nz-icon [nzType]="passwordVisible ? 'eye-invisible' : 'eye'" (click)="passwordVisible = !passwordVisible"></i>
      </ng-template>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-control [nzSpan]="15" nzErrorTip="{{ 'app.login.message-no-input-code' | translate }}">
      <nz-input-group nzSize="large" nzPrefixIcon="lock">
        <input nz-input formControlName="captcha" placeholder="{{ 'app.login.placeholder.code' | translate }}" />
      </nz-input-group>
    </nz-form-control>
    <nz-form-control [nzSpan]="9" class="text-center">
      <img class="captchaImg" [attr.src]="captchaData?.img" (click)="getCaptchaPic()" title="点击更换验证码" />
    </nz-form-control>
  </nz-form-item>
</form>

// login.componet.ts 定义元素的 disabled 属性。不能直接在 Html 里使用 [disabled]="true",要在这里定义
  _form: FormGroup = this.FormBuilder.group({
    account: [{ value: null, disabled: true }, [Validators.required, Validators.minLength(1)]],
    password: [{ value: null, disabled: true }, Validators.required],
    remember: [false]
  });
  
  // 页面加载完后，用一个定时处理，改变输入框的 disabled 属性
   ngAfterViewInit() {
    setTimeout(() => {
      this._form.controls.account.enable();
      this._form.controls.password.enable();
    }, 2000);
  }

// login.componet.less  移除360极速浏览器等谷歌内容类浏览器，输入框的黄色背景
input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px white inset !important;
  box-shadow: 0 0 0 1000px white inset !important;
  transition: background-color 5000s ease-in-out 0s;
}