我有以下格式的 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 的存在进行更新。
执行此操作的正确方法是什么?
最佳答案
ng-required
和其他验证指令需要 ng-model
和 ngModelController
来实现其标准行为。
您需要更新您的 my-widget
组件以使用 ng-model
以获得使用标准指令(例如 ng-required
)。基本上,更改您的 data-selected-value="..."
属性以使用 ng-model="..."
并更新 Controller /链接功能以使其工作使用 ngModelController
生命周期。
我之前已经在其他问题上发布过此内容,但我建议您观看此视频,了解如何在自定义组件中使用 ngModel:Jason Aden - Using ngModelController to Make Sexy Custom Components因为它与您想要做的事情直接相关。
更新 myWidget
组件以使用 ng-model
的过程是特定于实现的。如果您发布有关该组件的更多信息,那么我们可以针对您可能需要执行的操作提供更多指导。
这是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();
});
}
};
};
关于javascript - 如何正确验证 AngularJS 中的非输入选择器?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48532795/