AngularJS Validation on <select> with a prompt option

前端 未结 9 2092
挽巷
挽巷 2021-02-05 11:17

I have the following code for a select drop down input that is styled in Bootstrap.


                        
    
提交评论

  • 2021-02-05 11:44

    Add "disabled" to the first option:

    <select class="form-control" name="businessprocess" ng-model="businessprocess" required>
    <option value="" disabled>-- Select Business Process --</option>
    <option value="C">Process C</option>
    <option value="Q">Process Q</option>
    

    0 讨论(0)
  • 2021-02-05 11:51

    This approach could/should solve your issue:

    1) declare the options inside of your scope:

    $scope.processes = [
        { code: "C", name: "Process C" },
        { code: "Q", name: "Process Q" }
    ];
    

    And 2) use this declaration:

    <select class="form-control" name="businessprocess" ng-model="businessprocess" required
        ng-options="c.code as c.name for c in processes" >
        <option value="">-- Select Business Process --</option>
    </select>
    

    The trick here is in fact, that during the angular cycles, will firstly fix the issue that the the current value is not among the processes options. So, the default would be set to:

    <option value="">-- Select Business Process --</option>

    and required will be working as expected (more details)

    0 讨论(0)
  • 提交回复
    热议问题