角度验证 - 当表单无效时阻止按钮 ng-click()

Question

我有一个角形式作为单页应用程序的一部分。 “继续”按钮将用户移动到应用程序的下一部分，并单击 ng。我想防止在单击按钮并且表单无效时发生这种 ng-click，但我不想禁用 Continue 按钮。

示例：用户进入页面并立即单击“继续”按钮而没有提供名字。将显示错误消息“您应该提供名字”，并且用户仍留在页面上。

我该怎么做？这是代码：

<form name="form" novalidate >

<div ng-show="form.FirstName.$touched && form.FirstName.$error.required" class="errorMessage">
    You must enter a first name
</div>

<div class="form-group">
    <label for="firstName" class="form-label">First Name</label>
    <input id="firstName" class="form-control" name="FirstName" ng-model="vm.user.firstName" required />
</div>

<div class="btn-group">
    <button ng-click="vm.next()">Continue</button>
</div>
</form>

Answer 1

只要在函数调用前加上form.$valid &&即可：

<form name="form" novalidate >

<div ng-show="form.FirstName.$touched && form.FirstName.$error.required" class="errorMessage">
    You must enter a first name
</div>

<div class="form-group">
    <label for="firstName" class="form-label">First Name</label>
    <input id="firstName" class="form-control" name="FirstName" ng-model="vm.user.firstName" required />
</div>

<div class="btn-group">
    <button ng-click="form.$valid && vm.next()">Continue</button>
</div>
</form>

Answer 2

按钮被禁用或可点击，你不能同时拥有它。

您可以在控制器中为 vm.next() 执行的操作是：

myApp.controller('Page1Controller'),  ['$scope', function ($scope)
{
    $scope.vm = {};

    $scope.vm.next = function()
    {
        if (! $scope.vm.isFormValid())            
            return;            
        //move to the next page with your current code
        ...
    }

    $scope.vm.isFormValid()
    {
        $scope.vm.shouldShowError = $scope.form.valid; //add vm.shouldShowError to your error message ng-show in the view so it will display only after clicking continue
        return $scope.form.valid;
    }
}]);