Angular setting form with scope?

Question

What I want is a form that I can use for both creating and updating. So I pass before showing

$scope.form = {};

$scope.car = null;
$scope.getCar = function(hash) {
  $http.get('/cars/'+hash).success(function(car) {
      $scope.car = car;
      $scope.form = car;
  });
};

As you can see I add the result of the get to both car and form. Now I'm opening the View:

<h1>{{ form.name }} <small>shows correctly</small></h1>

But a line after that I'm trying almost the same:

<form class="list" ng-submit="createOrUpdateForm(form)">

    <label class="item">
        <span class="input-label">Name</span>
        <input type="text" ng-model="form.name">

Here it's not shown... But when I add the same line after it like this:

<input type="text" ng-model="car.name">

This does work, but then I can't use the ng-submit anymore, because that references to form.

Form some reason I can't set the form scope?

confusing what is going on since you overwrite the initial object with car. Is car an object? Also not sure what you need 2 scope variables with same car value. Create a demo that replicates problem — charlietfl
– charlietfl, Commented Feb 4, 2016 at 21:49

HankScorpio · Accepted Answer · 2016-02-04 21:55:09Z

1

You should not manual assigning anything to form. A "form" is not the same as the data you manage using the form. Neither the empty object {} nor car make sense in that context.

Give the form a name, this will allow angular to assign it to a scope property.

<h1>{{ car.name }} <small>shows correctly</small></h1>

<form name="carForm" ng-submit="createOrUpdateForm(carForm)">

    <label class="item">
        <span class="input-label">Name</span>
        <input type="text" ng-model="car.name">

$scope.createOrUpdateForm = function(form) {
    if(form.$valid) {
        console.log($scope.car.name);
        // POST / PUT your data.
    }
};

answered Feb 4, 2016 at 21:55

HankScorpio

3,65117 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular setting form with scope?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related