javascript - 使用 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 required 来自 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);
    }

});

如果您只想在提交表单时显示错误，您可以添加一个变量来跟踪它，就像下面的代码一样(注意 ng-show="formName.prop.$error.required && Submitd"中的附加变量

<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);
    }

});