角动态字段验证(Angular dynamic fields validation)

编程入门行业动态更新时间:2024-10-17 13:32:04

我是learnig angular，我正在尝试使用vanilla angular实现以下行为。

我有以下html页面，动态创建文本输入和按钮。

通过按下按钮，我想验证所有输入（仅检查它们是否为空）并在无效输入下显示消息。用jQuery甚至用简单的JS实现它很容易，但我正在努力实现角度。

jsFiddle - https://jsfiddle.net/AlexLavriv/zkdodm4b/1/

I am learnig angular and I am trying to implement the following behavior using vanilla angular.

I have the following html page that creates dynamically text inputs and a button.

By pressing on the button I want to validate all the inputs (only to check if they are not empty) and show the message under the invalid input. It is very easy to implement with jQuery or even with plain JS, But I am struggling with angular.

jsFiddle - https://jsfiddle.net/AlexLavriv/zkdodm4b/1/

最满意答案

这应该会给你你想要的东西（只是一些调整）：

(function(angular) {
  'use strict';
  angular.module('scopeExample', [])
    .controller('MyController', ['$scope', function($scope) {
      $scope.instances = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine'];
      $scope.clicked = function() {
        angular.forEach($scope.instances, function(instance) {
          $scope.outerForm[instance].txt.$setTouched();
        });
      };
    }]);
})(window.angular); 
  <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<body ng-app="scopeExample">
  <div ng-controller="MyController">
    <form name="outerForm">
      <div ng-repeat="instance in instances">
        <ng-form name="{{instance}}">
          <input type="text" required="true" ng-model="txt" name="txt">
          <div ng-show="{{instance}}.txt.$error.required && {{instance}}.txt.$touched"> the input is illegal</div>
        </ng-form>
      </div>
      <input type="button" value="Press" ng-click="clicked()">
    </form>
  </div>
</body> 
  
 
 
 如果您有任何其他问题，请与我们联系。 
This should give you what you're looking for (just a few tweaks): 
 
 
  
  (function(angular) {
  'use strict';
  angular.module('scopeExample', [])
    .controller('MyController', ['$scope', function($scope) {
      $scope.instances = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine'];
      $scope.clicked = function() {
        angular.forEach($scope.instances, function(instance) {
          $scope.outerForm[instance].txt.$setTouched();
        });
      };
    }]);
})(window.angular); 
  <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<body ng-app="scopeExample">
  <div ng-controller="MyController">
    <form name="outerForm">
      <div ng-repeat="instance in instances">
        <ng-form name="{{instance}}">
          <input type="text" required="true" ng-model="txt" name="txt">
          <div ng-show="{{instance}}.txt.$error.required && {{instance}}.txt.$touched"> the input is illegal</div>
        </ng-form>
      </div>
      <input type="button" value="Press" ng-click="clicked()">
    </form>
  </div>
</body> 
  
 
 
Let me know if you have any further questions.

更多推荐

本文发布于:2023-07-14 18:56:00，感谢您对本站的认可！

本文链接:https://www.elefans.com/category/jswz/34/1106677.html