title: Angular Template driven form, button enable and disabled with Dropdown
body: <p>We have created Template driven form in angular, I have used button disable in form, when my form is not valid then button should be disabled and if form is valid then button should be enabled. The button remains disabled when I enter the data in input fields and select the value   from Engine Number or Chassis Number dropdown. kindly Suggest me what I should do.</p>
  <p>component.html</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div class=&quot;motor-policy-container&quot;&gt;
    &lt;form 
      #motorForm=&quot;ngForm&quot; 
      (ngSubmit)=&quot;registerMotorPolicy(motorForm.value, motorForm.valid)&quot;
    &gt;
      &lt;label&gt;Policy&lt;/label&gt;
      &lt;div&gt;
        &lt;input 
          class=&quot;input-box&quot; 
          name=&quot;policy_number&quot; 
          #motorpolicy_number=&quot;ngModel&quot; 
          oninput=&quot;javascript: if (this.value.length &gt; this.maxLength) this.value = this.value.slice(0, this.maxLength);&quot; 
          maxlength=&quot;20&quot; 
          type=&quot;number&quot; 
          placeholder=&quot;Enter policy number&quot; 
          ngModel required
        /&gt;
      &lt;/div&gt;
      &lt;small 
        class=&quot;validation-error&quot; 
        [hidden]=&quot;motorpolicy_number.valid || (motorpolicy_number.pristine &amp;&amp; !motorForm.submitted)&quot;
      &gt;
        Policy number required.
      &lt;/small&gt;
      &lt;br&gt;
      &lt;select 
        id=&quot;motorDropdown&quot; 
        name=&quot;motorNumber&quot; 
        (change)=&quot;setValue($event.target.value)&quot; 
        class=&quot;select-policy select-policy-dropdown&quot;
      &gt;
        &lt;option value=&quot;vehicleNumber&quot;&gt;Vehicle Registration Number&lt;/option&gt;
        &lt;option value=&quot;engineNumber&quot;&gt;Engine Number&lt;/option&gt;
        &lt;option value=&quot;chassisNumber&quot;&gt;Chassis Number&lt;/option&gt;
      &lt;/select&gt;
      &lt;br&gt;
      &lt;div class=&quot;input-container&quot;&gt;
        &lt;input 
          class=&quot;input-box&quot; 
          (input)=&quot;setMotorValue()&quot; 
          oninput=&quot;javascript: if (this.value.length &gt; this.maxLength) this.value = this.value.slice(0, this.maxLength);&quot; 
          id=&quot;vehicleNumber&quot; 
          name=&quot;vehicleNumber&quot; 
          placeholder=&quot;Vehicle Registration Number&quot; 
          maxlength=&quot;20&quot; 
          type=&quot;text&quot; 
          ngModel required 
        /&gt;
      &lt;/div&gt;
      &lt;br&gt;
      &lt;div class=&quot;terms-container&quot;&gt;
        &lt;input 
          type=&quot;checkbox&quot; 
          id=&quot;checkbox-1-3&quot; 
          name=&quot;motor-terms&quot; 
          #motor_terms=&quot;ngModel&quot;  
          class=&quot;regular-checkbox&quot; 
          ngModel required
        /&gt;
        &lt;label for=&quot;checkbox-1-3&quot;&gt;&lt;/label&gt;
        &lt;span&gt;I have read the &lt;a href=&quot;#&quot; class=&quot;condition&quot;&gt;Terms and Conditions&lt;/a&gt; and agree to abide by the same.&lt;/span&gt; 
        &lt;br/&gt;
        &lt;small 
          class=&quot;validation-error&quot; 
          [hidden]=&quot;motor_terms.valid || (motor_terms.pristine &amp;&amp; !motorForm.submitted)&quot;
        &gt;
          Please accept terms and conditions
        &lt;/small&gt;
      &lt;/div&gt;
      &lt;button 
        class=&quot;sbmt-btn&quot; 
        type=&quot;submit&quot; 
        [disabled]=&quot;!motorForm.valid || !motor_terms&quot;
      &gt;
        Submit
      &lt;/button&gt;
    &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  <p>component.ts</p>
  <pre><code>setValue(val){
    this.motorType = val;
  }
  
  setMotorValue(val){
    this.motorValue = val;
  }
  
  
  
  </code></pre>