0

目前，当用户在输入字段中输入时，我有一个 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);
  }
}
}
4

1 回答 1

0

在四处寻找后，我找到了答案，以防有人想知道。

将此添加到输入属性：

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

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

.make-uppercase {
  text-transform: uppercase;
}
于 2019-09-25T20:12:07.440 回答