Angular 模板驱动的表单，按钮启用和禁用下拉

Question

我们以角度创建了模板驱动的表单，我在表单中使用了按钮禁用，当我的表单无效时，应该禁用按钮，如果表单有效，则应该启用按钮。当我在输入字段中输入数据并从 Engine Number 或 Chassis Number 下拉列表中选择值时，该按钮保持禁用状态。请建议我应该怎么做。

component.html

<div class="motor-policy-container">
  <form 
    #motorForm="ngForm" 
    (ngSubmit)="registerMotorPolicy(motorForm.value, motorForm.valid)"
  >
    <label>Policy</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"  
        class="regular-checkbox" 
        ngModel 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>

组件.ts

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

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

Answer 1

对于按钮，您有[disabled]="!motorForm.valid || !motor_terms"，在我看来，您实际上想要检查[disabled]="!motorForm.valid || !motor_terms.valid"？