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

});

如果您只想在提交表单时显示错误，请添加一个变量来跟踪它，就像下面的代码一样（注意ng-show中的其他变量=＆＃34; formName.prop。$ error.required＆amp; ;＆amp;提交＆＃34;

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

});

使用angularjs进行表单验证

1 个答案: