title: Angular 7 FormControl cast input from number to string
body: <p>I have a FormGroup where I defined a FormControl used this way:</p>
  
  <pre><code>myForm: FormGroup = new FormGroup({ 
      ...
      code: new FormControl('', Validators.pattern('^[0-9]*$')),
      ...
    });
  </code></pre>
  
  <p>html:</p>
  
  <pre><code>&lt;mat-form-field class="col"&gt;
                  &lt;input formControlName="code" matInput&gt;
                &lt;/mat-form-field&gt;
  </code></pre>
  
  <p>I want this input to be a number, but I can't cast it correctly. I've registered to the <code>vauleChanges</code> event of the form control and did this:</p>
  
  <pre><code>this.myForm.controls['code'].valueChanges.subscribe(d =&gt; {
       if(this.myForm.controls['code'].valid){
        this.myForm.get('code').setValue( +this.myForm.controls['code'].value);
        }
      })
  </code></pre>
  
  <p>I've also tried using <code>as number</code> or <code>&lt;number&gt;</code> to cast the value, but if I print the value of my form I get it printed as a string and not a number.<br>
  Also, my input shows 0 as default when I load the page:
  <a href="https://i.stack.imgur.com/X7WrP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/X7WrP.png" alt="enter image description here"></a></p>
  
  <p>but I didn't set 0 anywhere and I don't want it to be showing.<br>
  I've tried specifying the input type as number, but it shows the arrows and I don't want them to show.</p>
  
  <p><a href="https://i.stack.imgur.com/2RNpn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2RNpn.png" alt="enter image description here"></a></p>
  
  <p>What is the correct way to implement this? I'm a lot confused.</p>