Размер шрифта входного элемента DOM меньше ожидаемого до первого клика на странице - PullRequest
Новая
       63

Размер шрифта входного элемента DOM меньше ожидаемого до первого клика на странице

1 голос
/ 19 сентября 2019

Моя проблема очень странная, и я не нашел подобных вещей в интернете.Размер моего входного загрузочного шрифта установлен в 1rem в проекте Angular 2.Но после перекомпиляции проекта, когда сайт загружается в первый раз, шрифт меньше ожидаемого, и когда я щелкаю в любом месте на странице, шрифт (только во входных данных) меняется на ожидаемый размер.

Перед щелчком мыши в любом месте страницы выглядит формавот так: до и после это как: после .Здесь вы можете увидеть небольшую разницу.

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 to type ="text "

проблема исчезла, но это должен быть пароль типа. Когда я изменяю входное значение в ngInit (только для тестов), размер шрифта в порядке.

То жеесли я удалю formControlName = "password" и "login", я думаю, что это может быть связано с угловой формой, но я не знаю, как решить эту проблему.

...