Distinguish between bound and unbound forms

148 views
Skip to first unread message

Jacob Rief

unread,
Apr 18, 2014, 2:36:54 PM4/18/14
to ang...@googlegroups.com
Django distinguishes between bound and unbound forms.

In bound forms, fields are rendered with values, often from a previous unsuccessful attempt of posting the form.
In unbound forms, the values of form fields are empty.

There is a problem when using bound forms in AngularJS, since the pre-rendered values are not visible for its fields.
Currently I use a custom directive named "form", which resets the field with its default value using $setViewValue.

Questions:
1. Is it good practice to add another directive named "form" to a custom Angular module, and if, which priority shall this directive have? I currently use -1. 
2. Do I assume correctly, that the terminology "bound form" is somehow Django specific und thus not used by Angular developers?
  a. If NO, is there a way in AngularJS to find out, if a form is bound or not?

Luke Kende

unread,
Apr 19, 2014, 2:26:10 AM4/19/14
to ang...@googlegroups.com
Yeah, have not heard of "bound" form before, but it make sense whatever you want to call it.  More abstractly, I'd call it "maintaining state"... for your form.  

I have a similar case where a user selects values, can go away and come back to the same page. I use a service to maintain state variables and share data between controllers in my single page app (meaning I'm not posting or reloading the page once loaded).  


<form>
  <input type="text" ng-model="formValues.username">
  <input type="text" ng-model="formValues.email">
  <button ng-click="resetForm">Reset</button>
</form>

function MyCtrl($scope, StateService){

  $scope.formValues = StateService.formValues; //will magically two-way bind not only to your controller variable but also the state service that lives for the lifetime of the app
  
  $scope.resetForm = StateService.reset//will happen in service and controller, and also in UI
  
}

function StateService(){
  var state = {
    formValues: { user: null, email: null },
    resetToDefaults: function (){
      this.formValues.user = 'Dave';
      this.formValues = 'da...@gmail.com'
    }
  }
  return state;
}

Now if we are talking about reloading the page and maintaining state, then you'll need to push and pull the values between the controller and the server, local storage, or cookies.  Once again, I'd user a service to call and get the state from either ajax, storage, or cookies, but same principals apply.
Reply all
Reply to author
Forward
0 new messages