角7-用户在输入字段中键入时，如何使实际值大写？

Question

[当前，当用户在输入字段中键入内容时，我具有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);
  }
}
}

Answer 1

在四处搜寻之后，我发现一个答案，以防有人怀疑。

将其添加到输入属性：

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

保持CSS文本转换，以防止用户看到小写字母转换为大写字母：

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