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

Question

我有一个角形式作为单页面应用程序的一部分."继续"按钮将用户移动到应用程序的下一部分,并进行ng-click.我想防止在单击按钮并且表单无效时发生此ng-click,但我不想禁用"继续"按钮.

示例:用户进入页面并立即单击"继续"按钮而不提供名字.将显示错误消息"您应该提供名字",并且用户仍保留在页面上.

我怎样才能做到这一点？这是代码:

<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>