D.Breen D.Breen - 7 months ago 25
Javascript Question

Ember: Locking a form on page load without hard-coding "disabled"

I have several forms with several inputs. My boss has asked me to find a way to disable the forms and have a lock/unlock button. So the user will go to the form, click unlock to make changes, then lock and/or save the form. The main problem is trying to find out how to do this without hardcoding "disabled=true" into all of the inputs (probably several hundred).

I'm 90% of the way. I have the toggleLock action working, and I even have it so the form will lock even when you transition within the same route to a different model. The problem is that the form doesn't lock the first time the page is loaded or if the page is refreshed.

Here's the code:
Available at: https://github.com/djbreen7/ember-sandbox

app/templates/meals/view.hbs

<form class="edit-form">
<div class="form-group">
<label for="exampleInputEmail1">Meal Name</label>
{{input type="text" class="form-control" id="" placeholder="" value=model.name}}
</div>
...
<button id="toggle-lock" type="button" class="btn btn-default" {{action 'toggleLock'}}>Unlock</button>
</form>


app/routes/meals/view.js

import Ember from 'ember';

export default Ember.Route.extend({
beforeModel(controller) {
if (!this.get('isLocked')) {
controller.send('toggleLock');
}
},

model(params, controller) {
if (!this.get('isLocked')) {
console.log('attempting to lock due to transition');
controller.send('toggleLock');
}
return this.modelFor('meals').findBy('id', parseInt(params.meal_id));
},

isLocked: false,

lockForm: function() {
if (this.get('isLocked')) {
Ember.$('.edit-form').find('input').prop('disabled', true);
Ember.$('#toggle-lock').text('Unlock');
} else {
Ember.$('.edit-form').find('input').prop('disabled', false);
Ember.$('#toggle-lock').text('Lock');
}
}.observes('isLocked'),

actions: {
toggleLock: function() {
if (this.get('isLocked')) {
console.log('unlocking');
this.set('isLocked', false);
} else {
console.log('locking');
this.set('isLocked', true);
}
}
}
});

Answer

Blockquote

You can solve this an easier way, these are the steps you can follow:

  1. If you want that your form starts locked you must set isLocked:true
  2. Remove lockForm function
  3. Add to your inputs the disable property. This will enable or disable your inputs depending on `isLocked.

  4. {{input type="text" class="form-control" id="" placeholder="" value=model.name disabled=isLocked}}

  5. Remove controller.send('toggleLock'); from model and beforeModel functions, is unnecesary because you setted isLocked to true

  6. Add the resetController hook to handle transitions within the same route

    resetController: function(controller){
      controller.set('isLocked', true);
    }
    

Here's a running example https://ember-twiddle.com/fd75547e27faf867ce0daeb9eb65db14?openFiles=controllers.application.js%2C