在窗体中，我使用名称，ID和类属性进行控件。我不能在html input元素中添加任何costom属性。在这种情况下，我应该如何应用验证。如何使用角度Js中的名称或id属性验证表单

我可以在元素名称或ID上编写指令吗？

HTML

<form class="form-horizontal text-center" role="form" name="DTOstep1" ng-submit="onSubmit(DTOstep1)" novalidate> 
<input name="userinput1" id="userinput1" class="" /> 
<input name="userinput2" id="userinput2" class="" /> 
<input name="saveDto" type="submit" class="btn btn-success btn-lg" value="Continue" /> 
</form>

指令代码

(function() { 
    "use strict"; 

    angular 
      .module("autoQuote") 
      .directive('userinput1', [userinput1]) 
      ....

或有任何其他的方式做表单验证。我希望对每个表单字段应用一些自定义验证。

来源

2016-08-01 Praveen D

角自动添加归类到每个NG-模型

这应该有助于 https://docs.angularjs.org/guide/forms

添加拨弄作为例子

https://jsfiddle.net/x0f6czfk/

<body ng-app="app"> 
    <form ng-controller="mainCtrl"> 
    <input ng-model="name" type="text"> 
    <input ng-model="email" type="text"> 
    <input type="button" ng-click="validateForm()" value="Save"> 
    </form> 
</body> 

(function(window,document,undefined){ 
var app = angular.module('app',[]); 


    app.controller('mainCtrl',function($scope){ 
    var self = this; 
    $scope.validateForm = function(){ 
    //custom validation 
     if($scope.name === 'test'){ 
     console.log('wrong name'); 
     return; 
     } 
    //custom validation 
    if($scope.email === '[email protected]'){ 
       console.log('wrong email'); 
      return; 
     } 
     else{ 
     //if no validation error, submit data; 
     console.log('valid form'); 
     } 
    } 
    }); 
})(window,document)

来源

2016-08-01 07:07:51

是的，但这些类对于所有控件都是相同的。如何区分每个字段。就像我想仅应用验证表单userinput1一样。 –

@ Greatym.com编辑了答案。看看它是否有帮助 –

添加需要那些要在其上添加val的字段idation -

'use strict'; 
 
var app = angular.module("demo", [], function($httpProvider) { 
 

 
}); 
 

 
app.controller("demoCtrl", function($scope) { 
 
    $scope.onSubmit = function(){ 
 
     alert('form valid'); 
 
     } 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<body ng-app="demo"> 
 
<div ng-controller="demoCtrl"> 
 
<form name="form" id="form" class="form-horizontal text-center" role="form" > 
 
<input ng-required="true" ng-model="userinput1" name="userinput1" id="userinput1" class="" /><br> 
 
Check it to make userinput 2 required: <input type="checkbox" ng-model="check" /> 
 
<input ng-required="check" ng-model="userinput2" name="userinput2" id="userinput2" class="" /> 
 
<br><input ng-click="onSubmit(DTOstep1)" ng-disabled="form.$invalid" name="saveDto" type="submit" class="btn btn-success btn-lg" value="Continue" /><br> 
 
</form> 
 
    </div> 
 
</body>

你也可以用NG-模型内部NG-需要切换NG-所需的真假。

来源

2016-08-01 07:17:00

要求在那里与所有领域。我想申请一些自定义验证。 –

我不明白你的答案。你能解释一下吗？ –

你想要什么样的自定义验证？ –

angular way要求ng-model属性为每个字段，以便绑定它与模型属性。

function TestCtrl($scope) { 
 
    $scope.fields = { 
 
    "userinput1" : "Initial Value", 
 
    "userinput2" : "" 
 
    } 
 
    
 
    $scope.onSubmit = function onFormSubmit($event, form) { 
 
    if(form.$invalid) { 
 
     console.log("invalid", form); 
 
     event.preventDefault(); 
 
     return; 
 
    } 
 
    
 
    console.log('valid', form); 
 
    //send here 
 
    }; 
 
} 
 
angular 
 
    .module('test', []) 
 
    .controller("TestCtrl", ["$scope", TestCtrl]) 
 
;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<section ng-app="test"> 
 
    <article ng-controller="TestCtrl"> 
 
    <form name="DTOstep1" ng-submit="onSubmit($event, DTOstep1)"> 
 
     
 
     <input name="userinput1" ng-model="fields.userinput1" required/> 
 
     <input name="userinput2" ng-model="fields.userinput2" required /> 
 
     
 
     <input name="saveDto" type="submit" ng-disabled="DTOstep1.$pristine || DTOstep1.$invalid" /> 
 
</form> 
 
    </article> 
 
</section>

顺便说，如果不能以创建一个角形式编辑的视图，就需要控制通过DOM查询的形式，例如as vanilla javascript ...使用document.querySelector()并检查value属性。

UPDATE

许多基本的检查可以用简单的程序方法进行，如果你想使用MINLENGTH应用于userinput1场，每个onSubmit你需要检查$scope.fields.userinput1.length > ...，等等...

一个更清洁，建议的方法是使用HTML5验证属性，角装饰他们认识兵卫的规则，所以，你可以使用min/max/min-length/max-length/required/pattern/disabled等

如果你想提供一种可重用的方式，你应该看看FormController.$addControl或者通过需要ngModelController等等的属性来构建自定义指令。

来源

2016-08-01 07:31:59 Hitmands

中使用TestCtrl ng-model有帮助。我如何在这里对输入进行验证？ –

我可以制定适用于字段的规则，以便我们可以根据需要重复使用多个字段的规则。 –

如果我使属性像myInput =“userinput1”和下一个myInput =“userinput2”。那么我可以对myInput属性值应用验证。 –

如何使用角度Js中的名称或id属性验证表单

回答

UPDATE

相关问题