Validate an input value is a minimum from a computed

Ember CLI
1

I have an item controller that sets a computed that is equal to a current bid amount, plus a minimum increment. This value should be what the user must enter as a minimum value to place a new bid on an item.

So say an item has a current high bid of $100, and the item has a minimum bid increment value of 10, currently on the controller I have a computed that looks like this…

min_bid_amt: Ember.computed('model.item_high_bid','model.item_bid_increment',function(){
  	return this.get('model.item_high_bid') + this.get('model.item_bid_increment');
  }),

In an input on the item.hbs page I have the value mapped to this computed

{{input class="bid-amt" value=min_bid_amt}}`

When the user submits I’m calling an ajax function to place a new bid. There are two things I need to figure out how to make happen (preferably the ember way).

  1. I need the new bid input to have a validation of some sort on it that prevents the user from placing a bid lower than the required new minimum amount, ei. in the example above I don’t want them to change the value that was placed to something like $105 when the minimum is $110
  2. I need to prevent the form from submitting if the user has entered a value that is less than the required minimum amount to bid

I don’t know if I can use something like ember-validations here (I’m struggling through their documentation to find a way I might be able to do it) or if I should be able to roll my own solution to make this work.

Hope all this makes sense.

2

For flexibility in handling input validation and DOM events, I’d suggest creating a component that contains the {{input}}. With this new component (let’s say its called x-input-validator), you can listen to DOM events such as enter using the following:

// create with ember generate component x-input-validator
// app/components/x-input-validator.js
import Ember from 'ember';

export default Ember.Component.extend({
    enter: function(event) {
        event.preventDefault();
        let value = this.get('min_bid_amt');
        // do things
    }
});

// app/templates/components/x-input-validator.hbs
{{input class="bid-amt" value=min_bid_amt}}

This is a starting point and doesn’t entirely address point 1, but should be a happier path than doing all this validation from within a route template.