我的AngularJS验证不起作用。我添加了ng-required

时间:2017-03-21 17:30:48

标签: angularjs forms validation angularjs-forms

我的AngularJS验证不起作用。我添加了ng-required。请告诉我我失踪的地方

<ng-form id="frmdisbursementScheduleMaintenance">
            <div style="padding-bottom: 8px;">
                <button id="cm-SaveBtn" name="cm-SaveBtn" type="button" ng-click="submitted=true">Save</button>
                <button id="cm-RefreshBtn" name="cm-RefreshBtn" type="button">Refresh</button>
            </div>
          <div>
                    <table>

                        <tr>
                            <td><span class="VNAVLabel">Process Begin Date: </span></td>
                            <td> 
                                <span><input type="date" name="processBeginDate" ng-model="processBeginDate" required></span>
                                <span ng-show="(frmdisbursementScheduleMaintenance.processBeginDate.$dirty || submitted) && frmdisbursementScheduleMaintenance.processBeginDate.$error.required">
                                    Process Begin Date is required
                                </span>
                            </td>
                        </tr>

                    </table>
                </div>

</ng-form>

2 个答案:

答案 0 :(得分:2)

它不应该是id,您应该使用name属性。 Angular将创建名为$scope的{​​{1}}变量,其中包含表单信息。

frmdisbursementScheduleMaintenance

答案 1 :(得分:2)

使用&#39; name&#39;而不是&#39; id&#39;对于表单元素。

此外,您无需检查(frmdisbursementScheduleMaintenance.processBeginDate.$dirty || submitted)只有frmdisbursementScheduleMaintenance.processBeginDate.$error.required才能完成此任务。

<ng-form name="frmdisbursementScheduleMaintenance">
   <div style="padding-bottom: 8px;">
      <button id="cm-SaveBtn" name="cm-SaveBtn" type="button" ng-click="submitted=true">Save</button>
      <button id="cm-RefreshBtn" name="cm-RefreshBtn" type="button">Refresh</button>
   </div>
   <div>
      <table>
         <tr>
            <td><span class="VNAVLabel">Process Begin Date: </span></td>
            <td> 
               <span><input type="date" name="processBeginDate" ng-model="processBeginDate" required></span>
               <span ng-show="frmdisbursementScheduleMaintenance.processBeginDate.$error.required">
               Process Begin Date is required
               </span>
            </td>
         </tr>
      </table>
   </div>
</ng-form>