AngularJS - 具有多个实例的控制器的表单验证答案

【问题标题】：AngularJS - Form validation for a controller with multiple instancesAngularJS - 具有多个实例的控制器的表单验证
【发布时间】：2015-09-04 09:07:58
【问题描述】：

我的要求

我有业务需求，因此有必要进行手动验证，因为验证规则会更严格或更严格，具体取决于您将进入特定屏幕的上下文。

此外，同一视图的多个实例（因此，同一控制器）可能同时加载。

当前尝试

考虑一下Plunkr：

它使用以下函数进行验证：

self.SaveAndValidate = function(validationContext){
  var validationRules = self.GetValidationContext(validationContext);

  self.RemoveAllClassInfo();

  angular.forEach(validationRules, function(value){
    $('#' + value.Field).addClass('mandatory');
  })
}

您会注意到，您可以为不同的上下文保存，这将导致不同的字段被指示为必填项。

问题

您会注意到单击第二个表单的按钮无法按预期工作，因为它们针对的是第一个表单，而不是第二个。这是有道理的，因为我使用 jQuery 来定位使用特定字段名称的输入字段。在这种情况下，它们在同一页面上存在两次，因此定位到第一次出现。

如何更改此设置，以便每次验证都针对正确的表单？
有没有办法用 Angular 而不是 jQuery 来做到这一点？

【问题讨论】：

标签： javascript jquery .net angularjs asp.net-mvc

【解决方案1】：

您应该重新考虑添加强制课程的方式。也许创建一个自定义指令，或者只是一个 ng-class={'mandatory' : isMandatory(yourId) } 其中 isMandatory(id) 迭代您的列表以确定它是否是必填字段。

否则，最佳做法是查看 ng-form 并使用 ng-invalid ng-touched 类。 https://docs.angularjs.org/guide/forms

最后，请不要在 angularJS 控制器中使用 JQuery。

【讨论】：

ng-class 工作，请参阅更新（额外）Plunkr。