gpt4 book ai didi

javascript - 从 FormController 获取表单控件

转载 作者:IT王子 更新时间:2023-10-29 03:22:14 25 4
gpt4 key购买 nike

我需要一种方法来遍历 AngularJS 表单的已注册控件。本质上,我试图获取所有 $dirty 控件,但没有控件数组(FormController 除了包含控件本身之外还有许多不同的属性/函数 - 每个控件都是它自己的对象)。

我一直在查看源代码,我发现 FormController 中有一个 controls 数组,这正是我要查找的数组。有没有办法访问这个值,或者扩展 FormController 以包含返回此 controls 数组的函数?

编辑:Plnkr演示

此外,我意识到从技术上讲,我可以检查键字符串中的第一个字符是否为“$”,但我想避免这种情况,以防 future 版本的 Angular 中的 FormController/指令发生变化。

编辑 2:另一个说明:我在所有这一切中的目标是能够确定哪些特定字段是 $dirty,是否通过遍历整个控件列表(不包括 $dirty、$invalid、$error、 $name 和其他存在于 Form 对象中的属性)或通过扩展 FormController 并创建一个函数,该函数仅返回当前脏的控件(并且不等于它们的起始值)

编辑 3:我正在寻找的解决方案需要适用于不同结构的表单/模型。示波器上的模型是通过 AJAX 生成的,因此它们的结构已经设置好(我想避免为我已经通过 AJAX 接收的所有数据硬编码新结构)。此外,我希望跨多个表单/模型使用此表单提交过程,并且每个表单/模型都有不同的 JSON 结构——因为它们适用于我们对象模型中的不同实体。这就是为什么我选择寻求一种方法来访问 FormController 中的 controls 对象(我将在下面发布 FormController 的代码),因为它是唯一一个我可以获得我所有字段的平面阵列的地方。

function FormController(element, attrs) {


var form = this,
parentForm = element.parent().controller('form') || nullFormCtrl,
invalidCount = 0, // used to easily determine if we are valid
errors = form.$error = {},
controls = [];

// init state
form.$name = attrs.name || attrs.ngForm;
form.$dirty = false;
form.$pristine = true;
form.$valid = true;
form.$invalid = false;

parentForm.$addControl(form);

// Setup initial state of the control
element.addClass(PRISTINE_CLASS);
toggleValidCss(true);

// convenience method for easy toggling of classes
function toggleValidCss(isValid, validationErrorKey) {
validationErrorKey = validationErrorKey ? '-' + snake_case(validationErrorKey, '-') : '';
element.
removeClass((isValid ? INVALID_CLASS : VALID_CLASS) + validationErrorKey).
addClass((isValid ? VALID_CLASS : INVALID_CLASS) + validationErrorKey);
}

/**
* @ngdoc function
* @name ng.directive:form.FormController#$addControl
* @methodOf ng.directive:form.FormController
*
* @description
* Register a control with the form.
*
* Input elements using ngModelController do this automatically when they are linked.
*/
form.$addControl = function(control) {
controls.push(control);

if (control.$name && !form.hasOwnProperty(control.$name)) {
form[control.$name] = control;
}
};

/**
* @ngdoc function
* @name ng.directive:form.FormController#$removeControl
* @methodOf ng.directive:form.FormController
*
* @description
* Deregister a control from the form.
*
* Input elements using ngModelController do this automatically when they are destroyed.
*/
form.$removeControl = function(control) {
if (control.$name && form[control.$name] === control) {
delete form[control.$name];
}
forEach(errors, function(queue, validationToken) {
form.$setValidity(validationToken, true, control);
});

arrayRemove(controls, control);
};

// Removed extra code
}

如您所见,表单本身具有私有(private)的 controls 数组。我想知道是否有办法扩展 FormController 以便我可以公开该对象?或者创建一个公共(public)函数以便我至少可以查看私有(private)数组?

最佳答案

要直接解决问题,请像这样修改@lombardo 的答案;

     var dirtyFormControls = [];
var myForm = $scope.myForm;
angular.forEach(myForm, function(value, key) {
if (typeof value === 'object' && value.hasOwnProperty('$modelValue') && value.$dirty)
dirtyFormControls.push(value)
});

数组“dirtyFormControls”将包含脏的表单控件。

您还可以使用此技巧在“必需”验证和所有其他表单提交时显示错误消息。在您的 submit() 函数中,您将执行类似的操作;

 if (form.$invalid) {
form.$setDirty();
angular.forEach(form, function(value, key) {
if (typeof value === 'object' && value.hasOwnProperty('$modelValue'))
value.$setDirty();
});
//show user error summary at top of form.
$('html, body').animate({
scrollTop: $("#myForm").offset().top
}, 1000);
return;
}

在您的表单中,您将显示错误消息

    <span ng-messages="myForm['subject-' + $index].$error" ng-show="myForm['subject-' + $index].$dirty" class="has-error">
<span ng-message="required">Course subject is required.</span>
</span>

当您使用“ng-repeat”或类似的东西动态生成控件时,上述解决方案很有用。

关于javascript - 从 FormController 获取表单控件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20908096/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com