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>

面对
姓名必填项

在您的模板中尝试以下操作

<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);}