ngModel values are null after executing create-btn in AngularJS

Question

I have reduced my form to create the input fields with ngRepeat. So the items for the attributes are defined in my ctrl.

Firstly the Code of the ModalCtrl:

...
$scope.form = [
  {
     label: 'Firstname',
     fieldType: 'text',
     name: 'Fname',
     propertyName: 'fname',
     pattern: /^[a-zA-Z]{4}[a-zA-Z]*/,
     required: true,
     errRequired: 'Field is required.',
     errPattern: 'The name must have at least 4 characters.'
  },
  {
     label: 'Max. Age',
     fieldType: 'number',
     name: 'Maxage',
     propertyName: 'maxAge',
     pattern: /^[0-9][0-9]?$|^100$/,
     required: true,
     min: 0,
     max: 100,
     errType: 'Only numbers are allowed.',
     errRequired: 'Field is required.',
     errPattern: 'Numbers between 0 and 100.'
 }
];

This Array of objects are added in the following form view (Modal window):

<div class="modal-body">
  <form class="form-horizontal" name="editForm" novalidate>
    <div class="form-group-sm has-feedback" ng-repeat="el in form" ng-class="{ 'has-error' : hasError(editForm, el.name), 'has-success' : hasSuccess(editForm, el.name) }">
       <label class="control-label" for="{{el.id}}">{{el.label}}</label>
       <input type="{{el.fieldType}}"
              class="form-control" 
              placeholder="{{el.label}}"  
              name="{{el.name}}" 
              ng-model="selected[el.propertyName]"    
              ng-pattern="el.pattern" 
              ng-required="{{el.required}}"
              ng-minlength="{{el.min}}"
              ng-maxlength="{{el.max}}"
              />
       <p class="help-block" ng-show="editForm[el.name].$error.number">{{el.errType}}</p>
       <p class="help-block" ng-show="editForm[el.name].$error.required && editForm[el.name].$touched">{{el.errRequired}}</p>
       <p class="help-block" ng-show="editForm[el.name].$error.pattern">{{el.errPattern}}</p>
    </div>
  </form>
</div>

<div class="modal-footer">
  <button class="btn btn-default" ng-disabled="editForm.$invalid"  ng-click="createItem(selected)" type="submit">Create</button>
    <button class="btn btn-default" ng-click="cancel()">Cancel</button>
</div>

Always when I'm trying to create an object then I'm getting after the execute an empty object "NULL". I don't know where is the error?! The other items are correctly assigned only the ngModel aren't.

EDIT:

Here is the First view with the list:

<tr ng-repeat="item in nameslist" ng-click="btnOpen(this.item)" style="cursor:pointer">
     <td>{{ item.fname }}</td>
     <td class="max-spread">{{ item.maxAge }}</td>
</tr>

FirstCtrl:

    $scope.btnOpen = function (item) {
     (!item) ? ($scope.selectedItem = null) : ($scope.selectedItem = item);           
      modalService.openDialog('views/editform.html', $scope.selectedItem)
}

modalService:

..
openDialog: function (templateUrl, selectedItem) {
            return $modal.open({
                templateUrl: templateUrl,
                controller: 'ModalCtrl',
                resolve: {
                    selected: function () {
                        return selectedItem;
                    }
                }
            });
        }

Why do you have "selected" in your ng-model instead of just ng-model="el.propertyName"? — jordajm, Jun 24 '15 at 16:39
@jordajm because the form is in a modal view. in an other view is my list. When you click on an item in the list then the modal window opens and shows the form view with the selected values from the list. — yuro, Jun 24 '15 at 16:43
We'll probably need to see the code you're using to trigger the form modal in order to properly debug this — jordajm, Jun 24 '15 at 16:46
My bet is that since ng-repeat creates an isolated scope, you don't have access to the "select" object from within the modal unless you explicitly pass it into the scope. You may also be getting an isolated scope from the modal if you're using UI Bootstrap or some similar framework — jordajm, Jun 24 '15 at 16:49

score 0 · Answer 1 · answered Jun 24 '15 at 16:59

0

Make sure that in your "ModalCtrl" you're passing in "selected" and then setting it on the scope, like they do here in the UI Bootstrapdocs with the "items" object:

https://angular-ui.github.io/bootstrap/#/modal

angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($scope, $modalInstance, items) {

  $scope.items = items;
...
});

answered Jun 24 '15 at 16:59

jordajm

764
5
11

Thanks for your answer but in my case I've forgotten an If statement. Now it works :) – yuro Jun 24 '15 at 17:05

ngModel values are null after executing create-btn in AngularJS

1 Answers1