Q:

Convert text to Uppercase while typing in text field with angular reactive forms

I am using angular reactive forms in order to validate forms.  I need a way to automatically capitalize the text written in the input fields.  In here I need a solution that will work with angular formControl.  because I have tried out this problem with ngModel and it will generate the following warning
It looks like you're using ngModel on the same form field as formControlName. 

Here is the form declaration
      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])],
      });

Here is an example of a form field that I have used in the HTML view. 
                 <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>

A:

In your template try this, 
<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>

And add this using the necessary form control name,
changeTextToUppercase(field) {
const obj = {};
obj[field] = this.rForm.controls[field].value.toUpperCase();
this.rForm.patchValue(obj);}

