我的问题很奇怪，我在互联网上没有找到任何类似的东西。 我的 Bootstrap 输入字体大小在 Angular 2 元素中设置为 1rem。但是在第一次加载网站时重新编译元素后，字体小于预期，当我单击页面上的任何位置时，字体(仅在输入中)更改为预期大小。

在点击页面上的任何地方之前，表单看起来像这样: before 然后是:after .您在这里看不出什么区别。

表单组的HTML代码:

    <div class="form-group" [formGroup]="loginForm">
      <div class="input-group form-group">
        <div class="input-group-prepend">
          <span class="input-group-text"><i class="fas fa-user"></i></span>
        </div>
        <input class="form-control login-input" type="text" formControlName="login" placeholder="Email"
                      (keyup.enter)="login()" #loginName accessibilityRole=form>
        <div *ngIf="loginForm.get('login') as loginField">
          <ng-container *ngIf="loginField.dirty || loginField.touched">
            <div class="text-danger" *ngIf="loginField.hasError('required')">
                          {{loginFormErrorMessages.loginRequired}}
            </div>
            <div class="text-danger" *ngIf="loginField.hasError('email')">
                          {{loginFormErrorMessages.loginEmailError}}
            </div>
          </ng-container>
        </div>
      </div>
      <div class="input-group form-group">
        <div class="input-group-prepend">
          <span class="input-group-text"><i class="fas fa-key"></i></span>
        </div>
          <input class="form-control login-input" type="password" formControlName="password"
                      placeholder="Password" (keyup.enter)="login()">
            <div *ngIf="loginForm.get('password') as passwordField">
              <ng-container *ngIf="passwordField.dirty || passwordField.touched">
                <div class="text-danger" *ngIf="passwordField.hasError('required')">
                          {{loginFormErrorMessages.passwordRequired}}
                </div>
              </ng-container>
            </div>
          </div>
          <div class="form-group">
            <input type="submit" [disabled]="!loginForm.valid" value="Login" (click)="login()"
                      class="btn float-right login_btn">
          </div>
        </div>
    </div>

TS代码是:

import { Component, OnInit, ViewChild, ElementRef, OnDestroy } from '@angular/core';
import { NgbModal, NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { LoginEntryService } from '../login-entry.service';
import { Validators, FormBuilder } from '@angular/forms';
import { Router } from '@angular/router';


@Component({
  selector: 'app-login-entry',
  templateUrl: './login-entry.component.html',
  styleUrls: ['./login-entry.component.scss']
})
export class LoginEntryComponent implements OnInit, OnDestroy {
  tmpEmail: string;
  tmpPassword: string;
  isLoggingInProgress = false;
  @ViewChild('loginName') loginField: ElementRef;

  loginForm = this.fb.group({
    'login': ['', [
      Validators.required,
      Validators.email,
    ]],
    'password': ['', [
      Validators.required
    ]],
  });

  constructor(
    private fb: FormBuilder,
    private loginService: LoginEntryService,
    private modalService: NgbModal,
    private router: Router,
  ) { }

  ngOnInit() {
    this.loginField.nativeElement.focus();
  }

我发现，当我尝试在点击页面之前更改输入的字体大小时，它没有反应，只有在第一次鼠标点击页面后才会出现更改，然后它才能正常工作。

当我将 type="password 更改为 type="text"时

问题消失了，但必须输入密码。当我在 ngInit 中更改输入值时(仅用于测试)字体大小没问题。

同样，如果我删除 formControlName="password"和 "login"所以我认为它可能与 Angular 形式有关，但我不知道如何解决这个问题。

最佳答案

尝试像这样向 webkit 元素添加“字体大小”:

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill::first-line {
 font-size: 1rem;
}

https://stackoverflow.com/questions/58004867/