title: Button click not updating the angular formControlName value
body: <p>I have a form that has <kbd>+</kbd> and <kbd>-</kbd> for incrementing the value and formControlName is not updated when I use those buttons but works when I input manually. How to get around this? The code is below:</p>
  
  <pre><code>&lt;form [formGroup]="secondFormGroup"&gt;
        &lt;ng-template matStepLabel&gt;Amenities&lt;/ng-template&gt;
        &lt;h5&gt;How many guests can your place accomodate?&lt;/h5&gt;
        &lt;p class="textClass"&gt;
          Please specify the nuamber of guests your place can easily accomodate
          comfortably.
        &lt;/p&gt;
        &lt;div class="def-number-input number-input safari_only"&gt;
          &lt;button
            onclick="this.parentNode.querySelector('input[type=number]').stepDown()"
            class="minus"
          &gt;&lt;/button&gt;
          &lt;input
            formControlName = "guestCapacity"
            min="0"
            type="number"
          /&gt;
          &lt;button
            onclick="this.parentNode.querySelector('input[type=number]').stepUp()"
            class="plus"
          &gt;&lt;/button&gt;
        &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>I console logged the value and also used subscriber to see if it changes but like I said before it only works when I type the input manually and the button does not have any effect.</p>
  
  <pre><code>submit() {
      console.log(this.secondFormGroup.controls.guestCapacity.value);
    }
  </code></pre>