title: Convert text to Uppercase while typing in text field with angular reactive forms
body: <p>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 <code>formControl</code>. because I have tried out this problem with <code>ngModel</code> and it will generate the following warning</p>
  
  <pre><code>It looks like you're using ngModel on the same form field as formControlName.
  </code></pre>
  
  <p>Here is the form declaration</p>
  
  <pre><code>      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])],
        });
  </code></pre>
  
  <p>Here is an example of a form field that I have used in the HTML view.</p>
  
  <pre><code>                 &lt;div class="has-default col-md-6 px-0"&gt;
                      &lt;div class="input-group"&gt;
                        &lt;div class="input-group-prepend"&gt;
                          &lt;span class="input-group-text"&gt;
                            &lt;i class="material-icons"&gt;face&lt;/i&gt;
                          &lt;/span&gt;
                        &lt;/div&gt;
                        &lt;input
                          type="text"
                          class="form-control"
                          placeholder="First Name"
                          formControlName="firstName"
                        /&gt;
                      &lt;/div&gt;
                      &lt;div
                        class="error-msg"
                        *ngIf="
                          !rForm.controls['firstName'].valid &amp;&amp;
                          rForm.controls['firstName'].touched
                        "
                      &gt;
                        &lt;small&gt;First name &lt;strong&gt;required&lt;/strong&gt; &lt;/small&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
  </code></pre>