角JS验证不能正常工作

问题描述：

我想在我的形式使用角度JS验证，但对于一些原因，不能正常工作，请看看我的代码：角JS验证不能正常工作

<table class="table table-hover table-bordered"> 
    <form name="editPercentageForm" id="editPercentageForm" novalidate> 
    <thead> 
    <tr> 
     <th>From Hours</th> 
     <th>To Hours</th> 
     <th>Percentage</th> 
     <th></th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr ng-repeat="cancellationPercentData in cancellationPercent"> 
     <td class="form-group"> 
      <input type="number" name="editFromHours" ng-model="cancellationPercentData.fromHours" class="form-control" ng-disabled="disableField" id="{{ $index }}fromHours" required/> 
      <p ng-show="editPercentageForm.editFromHours.$touched && editPercentageForm.editFromHours.$invalid">This field is required</p> 
     <td class="form-group"> 
      <input type="number" name="edittoHours" ng-model="cancellationPercentData.toHours" class="form-control" ng-disabled="disableField" id="{{ $index }}toHours" required/> 
      <p ng-show="editPercentageForm.edittoHours.$touched && editPercentageForm.edittoHours.$invalid">This field is required</p> 
      <p ng-show="edittoHours>=editFromHours" class="text-danger">To Hours should not be more than to Hours</p> 
     </td> 
     <td class="form-group"> 
      <input type="text" name="editPer" ng-model="cancellationPercentData.percentage" class="form-control" ng-disabled="disableField" id="{{ $index }}percentage" required/> 
      <p ng-show="editPercentageForm.editPer.$touched && editPercentageForm.editPer.$invalid">This field is required</p> 
     </td> 
     <td class="form-group"> 
      <button class="btn btn-success col-xs-12" type="button" ng-click="disableField = false" ng-show="disableField" style="margin-bottom: 1%;">Edit</button> 
      <button class="btn btn-success col-xs-12" type="submit" style="margin-bottom: 1%;" ng-disabled="editPercentageForm.$invalid" ng-click="updateCancellations(cancellationPercentData, $index+'fromHours', $index+'toHours', $index+'percentage')" ng-show="disableField == false">Update</button> 
      <button class="btn btn-primary col-xs-12" type="button" ng-click="deleteCancellations(cancellationPercentData)" style="margin-bottom: 1%;">Delete</button> 
     </td> 
    </tr> 
    </tbody> 
    </form> 
</table>

谢谢提前:)

有没有更新？你能解决它吗？ –

答

不要在按钮单击提交表单。在表单标签中用ng提交。这将不会让表单提交，直到其完全验证。

此外，该方法可以比这个更好。你应该每行创建一个表单。这意味着您的表单也应该在ng-repeat之内。

这不会让你的表单在未经验证的情况下被提交。

另一种方法可以通过调用updateCancellations()函数的函数定义中的验证函数。如果自定义验证函数返回false，只需从那里返回执行，否则让它执行完成。

即使在用ng-submit替换ng-click后，我的验证无法正常工作 – Harish

我刚更新了我对该方法的回答。看一看。 @Harish –

我会试试看，让你知道 – Harish

答

你必须提交表格作为ng-submit在表格行而不是按钮，ng-repeat应该在表单级别。这将有效地验证字段。

角JS验证不能正常工作

相关推荐