Html 角动态场验证_Html_Angularjs

Html 角动态场验证

html angularjs

Html 角动态场验证,html,angularjs,Html,Angularjs,我正在学习angular，我正在尝试使用vanilla angular实现以下行为我有一个动态创建文本输入的html页面和一个按钮通过按下按钮，我想验证所有输入（仅检查它们是否为空），并在无效输入下显示消息。用jQuery甚至用普通的JS都很容易实现，但我正在努力解决这个问题 JSFIDLE- （函数（角度）{ "严格使用",； angular.module（'scopeExample'，[]） .controller（'MyController'，['$scope'，函数（$scope

我正在学习angular，我正在尝试使用vanilla angular实现以下行为

我有一个动态创建文本输入的html页面和一个按钮

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

JSFIDLE-

（函数（角度）{
"严格使用",；
angular.module（'scopeExample'，[]）
.controller（'MyController'，['$scope'，函数（$scope）{
$scope.instances=[1,2,3,4,5,6,7,8,9,10]；
$scope.clicked=function（）
{
警报（“点击”）；
};
}]);
})（窗口角度）；
输入是非法的

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

（函数（角度）{
"严格使用",；
angular.module（'scopeExample'，[]）
.controller（'MyController'，['$scope'，函数（$scope）{
$scope.instances=['1'，'2'，'3'，'4'，'5'，'6'，'7'，'8'，'9']；
$scope.clicked=function（）{
angular.forEach（$scope.instances，function（instance）{
$scope.outerForm[instance].txt.$setTouched（）；
});
};
}]);
})（窗口角度）

输入是非法的
根据当前代码的一些观察结果：

因为我们只重复表单元素
。因此，将ng repeat
放在
下面，而不是放在外面
应位于表单
元素下
使用老实说，您的代码有很多错误，特别是在HTML中使用AngularJS指令。您应该看看，并尝试一些示例。感谢您的评论，我已经阅读了该文档，老实说，我不明白我做错了什么。我还在w3c学校读了一篇关于角度验证的文章，这似乎是正确的方法。我对你的回答很感兴趣。提前谢谢，非常感谢！你肯定解决了我的问题。但我一直在想，有没有更具角度的方法呢？因为它感觉像是通过angular代码实现的jQuery。很高兴它成功了，不用担心。可以说得更具体一点，是否有一种角度更高的方法来实现它，并且感觉像jQuery实现？你怎么会这样想呢？我认为整个页面/表单应该只有一个验证变量，可能是$scope.isformValid=txt1.$valid&&txt2.$valid&&txt3.$valid等等，每个输入都应该绑定（绑定？）到该变量。应该有一个全局函数为整个页面/表单执行验证，而不是遍历输入的所有实例并激活验证（通过调用setTouch）。也许这是胡说八道，但我认为这是一种更具角度的方式。这确实取决于您的用例。看看这个，非常感谢！它是完美的。
(function(angular) {
  'use strict';
angular.module('scopeExample', [])
  .controller('MyController', ['$scope', function($scope) {
    $scope.instances = [1,2,3,4,5,6,7,8,9,10];
$scope.clicked = function()
{
    alert("clicked");
};


  }]);
})(window.angular);



    <body ng-app="scopeExample">
      <div ng-controller="MyController">
     <div ng-repeat="instance in instances">
    <form name="instance{{$index}}">
    <input type="text" required="true" ng-model="txt" name="txt">
    <div ng-show="instance{{$index}}.txt.$invalid && instance{{$index}}.txt.$touched"> the input is illegal</div>

    </form>
    </div>
    <input type="button" value="Press"  ng-click="clicked()">


</div>
</body>