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

Question

我有一个 angular 表格，格式如下（简体）：

<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 生命周期。

我已经 post 之前在其他问题上编辑过这个，但我建议您看一下这个关于如何在自定义组件中使用 ngModel 的视频：Jason Aden - Using ngModelController to Make Sexy Custom Components 因为它与你想做什么。

更新 myWidget 组件以使用 ng-model 的过程是特定于实现的。如果您 post 有关该组件的更多信息，那么我们可以就您可能需要执行的操作提供更多指导。

这里是code for the ngRequired directive。您可以看到，如果它所在的元素缺少 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();
      });
    }
  };
};

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

How to correctly validate a non-input selector in AngularJS?

html

javascript

jquery

angularjs

angular-components