Angular Template driven form, button enable and disabled with Dropdown

0
votes

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.

component.html

     <form #motorForm="ngForm" (ngSubmit)="registerMotorPolicy(motorForm.value,motorForm.valid)">                                        
        <label>Policy / Proposal Number</label>
        <div>
          <input class="input-box" name="policy_number" #motorpolicy_number="ngModel" oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" maxlength="20" type="number" placeholder="Enter policy number" ngModel required/>
         </div>
         <small class="validation-error" [hidden]="motorpolicy_number.valid || (motorpolicy_number.pristine && !motorForm.submitted)">
                                            Policy number required.
         </small>
           <br>
         <select id="motorDropdown" name="motorNumber" (change)="setValue($event.target.value)" class="select-policy select-policy-dropdown">
          <option value="vehicleNumber">Vehicle Registration Number</option>
          <option value="engineNumber">Engine Number</option>
           <option value="chassisNumber">Chassis Number</option>
         </select>
              <br>
         <div class="input-container">
            <input class="input-box" (input)="setMotorValue()" oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" id="vehicleNumber" name="vehicleNumber" placeholder="Vehicle Registration Number" maxlength="20" type="text" ngModel required />
           </div>
           <br>
          <div class="terms-container">
             <input type="checkbox" id="checkbox-1-3" name="motor-terms" #motor_terms="ngModel" ngModel class="regular-checkbox" required/>
            <label for="checkbox-1-3"></label>
             <span>I have read the <a href="#" class="condition">Terms and Conditions</a> and agree to abide by the same.</span> <br/>
            <small class="validation-error" [hidden]="motor_terms.valid || (motor_terms.pristine && !motorForm.submitted)">Please accept terms and conditions</small>
            </div>
      <button class="sbmt-btn" type="submit" [disabled]="!motorForm.valid || !motor_terms">Submit
      </button>
      </form>
      </div>```
    

component.ts

`setValue(val){
    this.motorType = val;
  }

  setMotorValue(val){
    this.motorValue = val;
  }


registerMotorPolicy(policyData,isValid){
    if(isValid){
      console.log(policyData);
          }
  } `
javascriptreactjsangular