无需提交按钮即可验证角度表单 [英] Validation of angular form without submit button

问题描述

我正在使用anuglar.js表单验证。
我想检查没有表单提交按钮的验证。

这是我的html。

 < form name =userForm> 
< input type =hiddenng-model =StandardID/> 
< div class =form-group> 
< label for =email>名称：< / label> 
< input type =textclass =form-controlng-model =Nameplaceholder =Namemaxlength =50required> 
< span ng-show =userForm.Name。$ dirty&&！userForm.Name。$ valid> Name is required。< / span> 
< / div> 
< div class =form-group> 
< label for =pwd>别名：< / label> 
< input type =textclass =form-controlng-model =Aliasplaceholder =Aliasmaxlength =50required> 
< / div> 
 
< button type =submitclass =btn btn-infong-click =update（）>提交< / button> 
< button type =submitclass =btn btn-infodata-dismiss =modal>取消< /按钮> 
< / form> 
  

我的控制器js是。

  $ scope.update = function（）{
 alert（$ scope.userForm.Name。$ valid）; 
 if（$ scope.userForm.Name。$ valid）{
 alert（Entry added）; 
 
 
 
 
 
 
 $ b 
它显示小对话框，表示该字段是必需的。我不想要这个弹出窗口。为什么span section没有显示？
解决方案
要做到这一点，关键是使用 name < form> 和所有输入中的code>属性。 
按照这种方式，angularjs将创建一个表单实例，您可以在其中访问所有字段，如 myForm.myInput。$ invalid  
 
 
 
例如： 
 
 
 < form name =myFormnovalidate> 
< label>我的输入：< / label> 
< input type =textname =myInputng-model =myInputrequired> 
< span ng-show =myForm.myInput。$ dirty&&！myForm.myInput。$ valid>我的输入无效。< / span> 
< / form> 
  
检查角度 docs  
 
I am using anuglar.js form validation.
I want to check validation without form submit button.

This is my html.
<form name="userForm">
  <input type="hidden" ng-model="StandardID" />
  <div class="form-group">
    <label for="email">Name:</label>
    <input type="text" class="form-control" ng-model="Name" placeholder="Name" maxlength="50" required>
    <span ng-show="userForm.Name.$dirty && !userForm.Name.$valid">Name is required.</span>
  </div>
  <div class="form-group">
    <label for="pwd">Alias:</label>
    <input type="text" class="form-control" ng-model="Alias" placeholder="Alias" maxlength="50" required>
  </div>

  <button type="submit" class="btn btn-info" ng-click="update()">Submit</button>
  <button type="submit" class="btn btn-info" data-dismiss="modal">Cancel</button>
</form>
My  controller js is.
$scope.update= function () {
    alert($scope.userForm.Name.$valid);
    if ($scope.userForm.Name.$valid) {
        alert("Entry added");
    }
}
It shows small dialog that says this field is required. I don't want this popup . Why span section does not show?
解决方案
To do it, the key is use the name attribute in your <form> and in all of your inputs. 
Following this way, angularjs will create a form instance where you can access all fields like myForm.myInput.$invalid



For example:
<form name="myForm" novalidate>     
    <label>My Input:</label>
    <input type="text" name="myInput" ng-model="myInput" required>
    <span ng-show="myForm.myInput.$dirty && !myForm.myInput.$valid">My Input is invalid.</span>
</form>
Check angular docs

                        
这篇关于无需提交按钮即可验证角度表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！