表单验证使用angularjs

Question

我有一个表格

<form name="formName"> 
<table> 
    <tr> 
     <td><input type="text" ng-model="validate" required/></td> 
    </tr> 
</table> 
</form> 
<button type="button" class="btn btn-default" ng-click="validate()">save</button> 

，你可以看到，该按钮的形式外..我想验证表单当我点击该按钮$ scope.validate（）;

问题是，我怎么能实现使用angularjs？

Answer 1

无论按钮位于表单之外还是之外，都会在模型的任何属性发生更改时始终执行验证。所以剩下的唯一问题就是何时显示错误信息。

btw要求是来自HTML5 ng-required是您应该使用的属性。

下面显示错误消息的代码时的任何属性改变

<div ng-app="mod"> 
<div ng-controller='MCtrl'> 
    <form name="formName" novalidate> 
     <table> 
      <tr> 
       <td> 
        <input type="text" name="prop" ng-model="model.property" ng-required="true" /> 
        <span ng-show="formName.prop.$error.required">Required</span> 
       </td> 
      </tr> 
     </table> 
    </form> 
    <button type="button" class="btn btn-default" ng-click="validate(formName)">save</button> 
</div> 

mod.controller('MCtrl', function ($scope) { 
    $scope.model = { property : ''}; 

    $scope.validate = function(form){ 
     alert(form.$valid); 
    } 

}); 

如果youd喜欢显示的错误，只有当提交表单添加一个变量来跟踪它像下面的代码（注意ng-show中的附加变量=“formName.prop。$ error.required & & submitted”

<div ng-app="mod"> 
<div ng-controller='MCtrl'> 
    <form name="formName" novalidate> 
     <table> 
      <tr> 
       <td> 
        <input type="text" name="prop" ng-model="model.property" ng-required="true" /> 
        <span ng-show="formName.prop.$error.required && submitted">Required</span> 
       </td> 
      </tr> 
     </table> 
    </form> 
    <button type="button" class="btn btn-default" ng-click="validate(formName)">save</button> 
</div> 

mod.controller('MCtrl', function ($scope) { 
    $scope.model = { property : ''}; 
    $scope.submitted = false; 

    $scope.validate = function(form){ 
     $scope.submitted = true; 
     alert(form.$valid); 
    } 

});