“假”提交中的角度表单验证

我在页面上有一个表单，其中有2个按钮。一个触发一个函数来计算价格，另一个触发器是表单的真实提交。“假”提交中的角度表单验证

这是一个简单的例子：

<form novalidate name="formStep1"> 
    <select ng-model="address" required> 
    <option></option> 
    <option></option> 
    </select> 

    <input type="text" ng-model="weight" /> 

    <label>{{price}}</label> 

    <button ng-click="getPrice()" /> 
    <button value="submit"/> 

</form>

我需要触发像$错误所有验证和$提交，因为我需要的功能时，把纳克级的形式的选择和输入标签所有的输入与文字。

谢谢。

来源

2015-10-19 Roger Nomen

在你form你有两个领域不具备name小号属性分配给它。要将这些字段作为表单的一部分，您需要将name属性分配给这些元素。一旦将name属性添加到它们，角形验证将开始显示其感染。

您也可以通过submitted标志来保持已提交的表格已被getPrice()方法提交或不提交。更重要的是点击使该标志以true &使用它，而这样做使用ng-class

标记

<form novalidate name="formStep1"> 
    <select ng-class="{'error': submitted && formStep1.address.$invalid}" name="address" ng-model="address" required> 
    <option></option> 
    <option></option> 
    </select> 

    <input ng-class="{'error': submitted && formStep1.weight.$invalid}" type="text" name="weight" ng-model="weight" /> 

    <label>{{price}}</label> 

    <button ng-click="submitted=true; getPrice()" /> 
    <button value="submit"/> 

</form>

来源

2015-10-19 17:07:59

好吧，我怎样才能让ng-class在选择或输入为空时点击getPrice时显示错误？我用做验证：纳克级=“{错误：！formStep1 $ error.valid && $ formStep1提交”} 如果我不能提交与形式NG点击我可以$没有提交我可以吗？ –

@RogerNomen没有你看着我的更新答案 –

是的，但是当我把名字NG-点击功能犯规把形式提交状态 –

验证回答自己与@的Pankaj的帮助：

随着输入的所有名称和传递formStep1如用getPrice函数的自变量我可以访问到像输入验证：

$scope.getPrice = function (form) { 
    if(!form.nameOfInput.$dirty) { 
    form.nameOfInput.$invalid = true; 
    } else { 
    // GET PRICE 
    } 
}

这是一个很好的方法，以防需要验证非提交按钮中的输入吗？

来源

2015-10-19 22:09:02

“假”提交中的角度表单验证

回答

相关问题