当在文本字段中使用angular reactive forms输入时，将文本转换为大写字母。

Question

我正在使用angular reactive forms来验证表单。我需要一种方法来自动大写输入字段中的文本。在这里，我需要一个能够与angular formControl.因为我已经尝试过用 ngModel 并会产生以下警告

It looks like you're using ngModel on the same form field as formControlName.

以下是表格声明

      this.rForm = this._FormBuilder.group({
      firstName: [null, Validators.compose([Validators.required])],
      lastName: [null, Validators.compose([])],
      companyName: [null, Validators.compose([Validators.required])],
      address: [null, Validators.compose([Validators.required])],
      });

下面是我在HTML视图中使用的一个表单字段的例子。

                 <div class="has-default col-md-6 px-0">
                    <div class="input-group">
                      <div class="input-group-prepend">
                        <span class="input-group-text">
                          <i class="material-icons">face</i>
                        </span>
                      </div>
                      <input
                        type="text"
                        class="form-control"
                        placeholder="First Name"
                        formControlName="firstName"
                      />
                    </div>
                    <div
                      class="error-msg"
                      *ngIf="
                        !rForm.controls['firstName'].valid &&
                        rForm.controls['firstName'].touched
                      "
                    >
                      <small>First name <strong>required</strong> </small>
                    </div>
                  </div>

Answer 1

在你的模板中，试试这个。

<div class="has-default col-md-6 px-0">
                    <div class="input-group">
                      <div class="input-group-prepend">
                        <span class="input-group-text">
                          <i class="material-icons">face</i>
                        </span>
                      </div>
                      <input
                        (input)="changeTextToUppercase('firstName')"
                        type="text"
                        class="form-control"
                        placeholder="First Name"
                        formControlName="firstName"
                      />
                    </div>
                    <div
                      class="error-msg"
                      *ngIf="
                        !rForm.controls['firstName'].valid &&
                        rForm.controls['firstName'].touched
                      "
                    >
                      <small>First name <strong>required</strong> </small>
                    </div>
                  </div>

并使用必要的表单控件名称添加这个。

changeTextToUppercase(field) {
const obj = {};
obj[field] = this.rForm.controls[field].value.toUpperCase();
this.rForm.patchValue(obj);}