如何正确验证AngularJS中的非输入选择器？

Question

我有以下格式的角形（简化）：

<form name="form">
    <input ng-model="$ctrl.val1" ng-required="true" />
    <my-widget data-selected-value="$ctrl.myWidgetSelectedValue" ng-required="true"></my-widget>
    <input ng-model="$ctrl.val2" ng-required="true" />
</form>

尽管my-widget本身不包含输入，但它是用于更新myWidgetSelectedValue的专用选择器。 而form。$ invalid根据其他输入的存在正确更新，我找不到一种方法也可以根据myWidgetSelectedValue的存在进行更新。

什么是正确的方法？

Answer 1

ng-required和其他验证指令需要ng-model和ngModelController来实现其标准行为。

您将需要更新my-widget组件以使用ng-model以获得使用标准指令（例如ng-required ）的好处。 基本上，将您的data-selected-value="..."属性更改为使用ng-model="..."并更新controller / link函数以使用ngModelController生命周期。

我已经在其他问题上发布了此内容，但我建议您看一下有关如何在自定义组件中使用ngModel的视频： Jason Aden-使用ngModelController制作性感的自定义组件，因为它与您要尝试的内容直接相关做。

更新myWidget组件以使用ng-model是特定于实现的。 如果您发布有关该组件的更多信息，那么我们可以为您可能需要做的事情提供更多指导。

---

这是ngRequired指令的代码 。 您可以看到，如果它所在的元素缺少ng-model属性，它实际上不会执行任何操作： if (!ctrl) return;

var requiredDirective = function() {
  return {
    restrict: 'A',
    require: '?ngModel',
    link: function(scope, elm, attr, ctrl) {
      if (!ctrl) return;
      attr.required = true; // force truthy in case we are on non input element

      ctrl.$validators.required = function(modelValue, viewValue) {
        return !attr.required || !ctrl.$isEmpty(viewValue);
      };

      attr.$observe('required', function() {
        ctrl.$validate();
      });
    }
  };
};