When I create object fail by 422, how to do not add in the list with ember data?

  DEBUG: -------------------------------
  DEBUG: Ember             : 2.8.1
  DEBUG: Ember Data        : 2.8.0
  DEBUG: jQuery            : 2.2.4
  DEBUG: Ember Simple Auth : 1.1.0
  DEBUG: -------------------------------

I have model just call it Product, create new product also in the /products url. The page look like:

When I submit create product form will send actions createProduct:

actions: {
  createProduct() {
    let product = this.store.createRecord('product', {
      name: this.get('name'),
      ...
    });
    theWorkItem.save().then(()=> {
      ...
    }, ()=> {
      this.set('workItemErrors', theWorkItem.get('errors'));
    });
  },
...

The problem is when my product name is blank, server will return 422 and errors message will display in product form, but product list will add one, look like:

And this empty object not save in the server, just display in browser. I think if server return 422 the object not add to list.

So there is a good solution to this situation? Thanks.