title: How to disable element / change styling upon another field change in Angular
body: <p>I have 2 fields:</p>
  
  <pre><code>&lt;input type="text" name="quantity" #quantity="ngModel" [(ngModel)]="orderProduct.selectedProduct.quantity" required min="1" max="50"&gt;
  </code></pre>
  
  <p>and a checkbox</p>
  
  <pre><code>&lt;label class="checkbox"&gt;
      &lt;input type="checkbox" name="orderProduct.selectedProduct.Option" value="{{option.Value}}" [(ngModel)]="option.checked" /&gt; &lt;!-- disable checkbox --&gt;
      &lt;span class="checkmark"&gt;&lt;/span&gt; &lt;!-- change css style to this element --&gt;
  &lt;/label&gt;
  </code></pre>
  
  <p>How can I disable/ enable the checkbox and change the styling to <code>checkmark</code> element if a user inputs the incorrect/ correct range of values (between min and max) in the <code>quantity</code> field?</p>
  
  <p>I'm new to angular and struggling to find solution. I'm using Angular 5.</p>