角验证 - prevent按钮NG-点击（）时，表格无效 [英] angular validation - prevent button ng-click() when form is invalid

问题描述

我有一个角的形式作为一个单一页面应用程序的一部分。 继续按钮，移动用户到应用程序的下一个部分，并具有NG-点击。我想prevent这个NG-点击从被点击的按钮，表格无效时发生的事情，但我不希望禁用的继续按钮。

例子：一个用户来到该页面并立即点击Continue按钮不提供名字。错误信息：你应该提供一个名字显示，用户仍然在页面上。

我怎样才能做到这一点？这里是code：

 ＆LT;表格名称=形式的novalidate＆GT;＆LT; D​​IV NG秀=$ form.FirstName感动和放大器;＆安培; $ form.FirstName error.required级=的errorMessage＆GT;
    您必须输入名字
＆LT; / DIV＆GT;＆LT; D​​IV CLASS =表单组＆GT;
    ＆LT;标签=名字级=形式的标签＆gt;首先名称和LT; /标签＆gt;
    ＆LT;输入ID =名字级=表格控NAME =姓吴模型=vm.user.firstName要求/＆GT;
＆LT; / DIV＆GT;＆LT; D​​IV CLASS =BTN-组＆GT;
    ＆LT;按钮NG点击=vm.next（）＆GT;继续＆LT; /按钮＆GT;
＆LT; / DIV＆GT;
＆LT; /表及GT;
 

解决方案

只需添加形式$有效和放大器;＆安培; 在函数调用前：

 ＆LT;表格名称=形式的novalidate＆GT;＆LT; D​​IV NG秀=$ form.FirstName感动和放大器;＆安培; $ form.FirstName error.required级=的errorMessage＆GT;
    您必须输入名字
＆LT; / DIV＆GT;＆LT; D​​IV CLASS =表单组＆GT;
    ＆LT;标签=名字级=形式的标签＆gt;首先名称和LT; /标签＆gt;
    ＆LT;输入ID =名字级=表格控NAME =姓吴模型=vm.user.firstName要求/＆GT;
＆LT; / DIV＆GT;＆LT; D​​IV CLASS =BTN-组＆GT;
    ＆LT;按钮NG点击=$形式有效和放大器;＆安培; vm.next（）＆GT;继续＆LT; /按钮＆GT;
＆LT; / DIV＆GT;
＆LT; /表及GT;
 

I have an angular form as part of a single page App. The 'Continue' button moves a user to the next section of the app, and has an ng-click. I would like to prevent this ng-click from happening when the button is clicked and the form is invalid, but I don't want to disable the Continue button.

Example: A user comes to the page and immediately clicks the Continue button without providing a first name. The error message "You should provide a first name" is shown and the user remains on the page.

How can I do this? Here is the code:

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

解决方案

Just add form.$valid && before the function call:

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

这篇关于角验证 - prevent按钮NG-点击（）时，表格无效的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！