Угловой 7 - Когда пользователь вводит в поле ввода, как я могу сделать фактическое значение в верхнем регистре? - PullRequest
Новая
       36

Угловой 7 - Когда пользователь вводит в поле ввода, как я могу сделать фактическое значение в верхнем регистре?

0 голосов
/ 25 сентября 2019

В настоящее время, когда пользователь печатает в поле ввода, у меня есть свойство css, которое преобразует текст в верхний регистр.Однако я столкнулся с несколькими проблемами, связанными с проверкой.

Например, если пользователя просят подтвердить свой адрес электронной почты, и он копирует и вставляет значение из одного поля в другое, он говорит им, чтоэлектронные письма не совпадают.

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

Как сделать так, чтобы значение в поле ввода текста было прописным, так как пользователь вводит только угловые 7?

Мой файл CSS содержит: 

.make-uppercase {
  text-transform: uppercase;
}

Мой HTML-код для поля электронной почты выглядит следующим образом: 

              <div class="col-lg-8 registration-answer">
               <label for="form-student-contact-3" class="col-lg-12" data-hint="yes">
                <span class="form-required">*</span>{{'Confirm Email Address' | translate}}<i class="fa fa-info-circle ml-2" aria-hidden="true"></i>
              </label>
            <input
              type="text"
              formControlName="confirmEmail"
              [ngClass]="{ 'is-invalid': submitted && registerFormControl.confirmEmail.errors }"
              class="form-control make-uppercase col-md-8"
              data-hint="yes"
              id="form-student-contact-text-3"
            >
            <div  *ngIf="registerFormControl.confirmEmail.errors" class="text-danger col-md-8">
              <div *ngIf="this.registerFormControl.confirmEmail.touched && this.registerFormControl.confirmEmail.invalid && !this.registerFormControl.confirmEmail.errors.required">
                  Emails do not match.
              </div>

              <div *ngIf="registerFormControl.confirmEmail.errors.required" class="text-danger col-md-8">
                  Confirm Email is required.
              </div>
            </div>
          </div>

В моем файле TS для моей реактивной формы 

  ngOnInit() {
this.registerForm = this.formBuilder.group({
  email: ['', Validators.required],
  confirmEmail: ['', Validators.required],
}, {
    validator: CustomValidators.MustMatch('email', 'confirmEmail')
  });

И мой пользовательский валидатор для MustMatch 

  static MustMatch(controlName: string, matchingControlName: string) {
return (formGroup: FormGroup) => {
  const control = formGroup.controls[controlName];
  const matchingControl = formGroup.controls[matchingControlName];

  if (matchingControl.errors && !matchingControl.errors.mustMatch) {
    // return if another validator has already found an error on the matchingControl
    return;
  }

  // set error on matchingControl if validation fails
  if (control.value !== matchingControl.value) {
    matchingControl.setErrors({ mustMatch: true });
  } else {
    matchingControl.setErrors(null);
  }
}
}

1 Ответ

0 голосов
/ 25 сентября 2019

После поиска я нашел ответ на тот случай, если кому-то интересно.

Добавьте это к свойству ввода: 

oninput="this.value = this.value.toUpperCase()"

Сохраняйте преобразование текста CSS, чтобы пользователь не видел строчные буквыбуквы преобразуются в верхний регистр: 

.make-uppercase {
  text-transform: uppercase;
}
...