验证的角度形式不提交按钮

问题描述：

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

这是我的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>

我的控制器js是。

$scope.update= function() { 
    alert($scope.userForm.Name.$valid); 
    if ($scope.userForm.Name.$valid) { 
     alert("Entry added"); 
    } 
}

它显示说明该字段是必需的小对话框。我不想要这个弹出窗口。为什么跨度部分不显示？

无法正常工作。我之前做过，但我不知道这段代码有什么问题。为什么跨度部分没有显示。 – user3248761

答

要做到这一点，关键是在<form>和所有输入中使用name属性。按照这种方式，angularjs将创建一个表单实例，您可以访问诸如myForm.myInput.$invalid

例如各个领域：

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

检查角docs

是的工作，但与此“请填写此字段”通知对话框也可见。如何删除它？ – user3248761

你在哪里看到该通知？提交表单时浏览器是否通知？尝试把

答

HTML

<div ng-app="myApp"> 
<form name="cutome_form" ng-submit="submitForm()" novalidate> 

    <input type="text" name="name" class="form-control" ng-model="Name" placeholder="Name" maxlength="50" required> 
           <div ng-show="cutome_form.name.$dirty && cutome_form.name.$invalid"> 
           <span class="error" ng-show="cutome_form.name.$error.required">The field is required.</span> 
           </div> 

       <div class="form-group"> 
          <label for="pwd">Alias:</label> 
          <input type="text" name="alias" class="form-control" ng-model="Alias" placeholder="Alias" maxlength="50" required> 
         </div> 
    <div ng-show="cutome_form.alias.$dirty && cutome_form.alias.$invalid"> 
     <span class="error" ng-show="cutome_form.alias.$error.required">The field is required.</span> 
    </div> 

    <button type="submit" ng-disabled="cutome_form.$invalid">Submit All</button> 
</form> 
</div>

指令

.directive('ngModel', function() { 
    return { 
     require: 'ngModel', 
     link: function(scope, elem, attr, ngModel) { 
      elem.on('blur', function() { 
       ngModel.$dirty = true; 
       scope.$apply(); 
      }); 

      ngModel.$viewChangeListeners.push(function() { 
       ngModel.$dirty = false; 
      }); 

      scope.$on('$destroy', function() { 
       elem.off('blur'); 
      }); 
     } 
    } 
});

验证的角度形式不提交按钮

相关推荐