Получение элемента управления формы от FormController

Question

Мне нужен способ прокрутки зарегистрированных элементов формы AngularJS. По сути, я пытаюсь получить все $ dirty элементы управления, но нет массива элементов управления (у FormController есть несколько различных свойств/функций в дополнение к содержанию самих элементов управления, каждый из которых является его собственным объектом).

Я смотрел исходный код, и я вижу, что в FormController есть массив controls, который является именно тем массивом, который я ищу. Есть ли способ получить доступ к этому значению или расширить FormController, чтобы включить функцию, которая возвращает этот массив controls?

Edit: Plnkr демо

Кроме того, я понял, что технически я мог проверить первый символ в ключевой строке для «$», но я хотел бы избежать, что в случае FormController/директивные изменения в будущая версия Angular.

Редактировать 2: Другое пояснение. Моя цель заключается в том, чтобы определить, какие конкретные поля являются грязными, путем циклического перебора всего списка элементов управления (не считая $ dirty, $ invalid, $ error , $ name и другие свойства, которые живут в объекте Form, как есть) или путем расширения FormController и создания функции, которая возвращает только те элементы управления, которые в настоящее время загрязнены (и не равны их начальным значениям).

Редактировать 3 : Решение, которое я ищу, должно быть применимо к формам/моделям различных структур. Модели в области сгенерированы с помощью AJAX, поэтому их структура уже установлена ​​(я бы хотел избежать жесткой кодировки новой структуры для всех данных, которые я уже получаю через AJAX). Кроме того, я хочу использовать этот процесс подачи формы для нескольких форм/моделей, и каждый из них имеет разные структуры JSON - поскольку они применяются к различным объектам в нашей объектной модели. Вот почему я решил попросить способ получить доступ к объекту controls в FormController (я выложу код от 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 
} 

Как вы можете видеть, сама форма имеет controls массив частной доступны. Мне интересно, есть ли способ расширить размер FormController, чтобы я мог сделать этот объект общедоступным? Или создать публичную функцию, чтобы я мог, по крайней мере, просматривать частный массив?

Answer 1

Для непосредственного решения вопроса, изменить ответ @ Ломбардо как так;

 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> 

выше решение полезно, когда вы динамически элементы управления с помощью «нг-повтор» или что-то подобное.

Answer 2

попробовать просто с внутри контроллера:

$scope.checkForm = function(myFormName){ 
    console.log(myFormName.$invalid); 
} 

UPDATE:

<div ng-controller="MyController"> 
       <form name="form" class="css-form" novalidate> 
        <input type="text" ng-model="user.uname" name="uname" required /><br /> 
        <input type="text" ng-model="user.usurname" name="usurname" required /><br /> 
        <button ng-click="update(form)">SAVE</button> 
       </form> 
       </div> 

app.controller('MyController',function($scope){ 
       $scope.user = {}; 
       $scope.update = function (form){ 
        var editedFields = []; 
        angular.forEach($scope.user, function(value, key){ 
         if(form[key].$dirty){ 
          this.push(key + ': ' + value); 
         } 

        }, editedFields); 
        console.log(editedFields); 
       } 
     }); 

Answer 3

Я придумал несколько приличном решение, но оно все еще не то, что я искал для. Я избавил некоторый код от другой проблемы, связанной с созданием объектов JSON из строк, и придумал следующее:

По сути, я назову свои поля так же, как они привязаны к модели, а затем построил новый объект для представления при вызове form_submit.

Plnkr demo

В демке, если изменить одно из полей формы, затем нажмите отправить, вы увидите объект всплывал только грязные ценности.

Answer 4

Вы можете использовать следующий код для перебора элементов управления:

var data = {}; 
    angular.forEach(myForm, function (value, key) { 
     if (value.hasOwnProperty('$modelValue')) 
      data[key] = value.$modelValue; 
    });