更新

Question

在表单中，我有名称，id和class属性的控件。我无法在html输入元素中添加任何costom属性。在这种情况下，我如何应用验证。

我可以在元素名称或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])
            ....

还是有其他方法可以进行表单验证。我想对每个表单字段应用一些自定义验证。

Answer 1

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查询控制表单，例如vanilla javascript ... using { {1}}并检查document.querySelector()属性。

更新

可以使用简单的程序方法进行许多基本检查，如果要将minlength应用于userinput1字段，则需要在每个value上检查onSubmit，等等...

更干净和建议的方法是使用html5验证属性， angular装饰它们并识别thei规则，因此，您可以使用$scope.fields.userinput1.length > ...等。

如果您想提供可重用的方式，您应该查看min/max/min-length/max-length/required/pattern/disabled或如何通过需要FormController.$addControl的属性构建自定义指令等等...

Answer 2

angular会自动为每个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 === 'test@demo.com'){
                console.log('wrong email');
          return;
        }
      else{
      //if no validation error, submit data;
        console.log('valid form');
      }
    }
  });
})(window,document)

Answer 3

将必需添加到要添加验证的字段 -

＆＃13;

'use strict';
 var app = angular.module("demo", [], function($httpProvider) {

});

app.controller("demoCtrl", function($scope) {
    $scope.onSubmit = function(){
      alert('form valid');
      }

});

＆＃13;

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

＆＃13;

你也可以在ng-required中使用ng-model来切换ng-required true和false。

如何在角度Js中使用name或id属性验证表单

3 个答案:

更新