ember-bootstrap always show validation on edit forms

components.user-form.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: '',
});

controllers.add.js

import Ember from 'ember';
import UserValidations from '../validations/user';
import { inject as controller } from '@ember/controller';
import { readOnly } from '@ember/object/computed';
import { assign } from '@ember/polyfills';

export default Ember.Controller.extend({
  UserValidations,
  
  indexController: controller('index'),
  users: readOnly('indexController.users'),
  
  actions: {
    save(changeset) {
      let nextId = this.users
      	.reduce((nextId, user) => nextId > user.id ? nextId : user.id + 1, 0);
      let record = assign({ id: nextId }, changeset.get('change'));
      this.users.push(record);
      this.transitionToRoute('index');
    }
  }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
});

controllers.edit.js

import Ember from 'ember';
import UserValidations from '../validations/user';

export default Ember.Controller.extend({
  UserValidations,

  actions: {
    save(changeset) {
      changeset.execute();
      console.log(changeset.get('data'));
      this.transitionToRoute('index');
    }
  }
});

controllers.index.js

import Ember from 'ember';

export default Ember.Controller.extend({
  users: [
    {
      id: '1',
      firstName: 'John',
      lastName: 'Doe',
      email: '[email protected]',
    },
    {
      id: '2',
      firstName: 'Jane',
      lastName: 'Doe',
      email: '[email protected]',
    },
    {
      id: '3',
      firstName: 'Max',
      lastName: 'Mustermann',
      email: '[email protected]',
    },
  ],
});

router.js

import EmberRouter from '@ember/routing/router';
import config from './config/environment';

const Router = EmberRouter.extend({
  location: 'none',
  rootURL: config.rootURL
});

Router.map(function() {
  this.route('add');
  this.route('edit', { path: 'edit/:id' });
});

export default Router;

routes.index.js

import Ember from 'ember';

export default Ember.Route.extend({
  model() {
    return 
  },
});

templates.add.hbs

<h2>Add another user</h2>

<UserForm
	@user={{changeset (hash) UserValidations}}
  @onSubmit={{action "save"}}
/>

templates.application.hbs

{{outlet}}

templates.components.user-form.hbs

<BsForm
	@model={{@user}}
  @onSubmit={{action @onSubmit}}
  @showAllValidations={{if isEdit true null}}
as |form|
>
  <form.element @property="firstName" @label="first name" />
  <form.element @property="lastName" @label="last name" />
  <form.element @property="email" @label="email" @controlType="email" />
  <BsButton @type="primary" @buttonType="submit">submit</BsButton>
</BsForm>

templates.edit.hbs

<h2>Edit user <i>{{this.model.firstName}} {{this.model.lastName}}</i></h2>

<p>
	Edit form shows validation directly. It's green by default and only goes to red state if current input couldn't be saved.
</p>

<UserForm
	@user={{changeset this.model UserValidations}}
  @onSubmit={{action "save"}}
  @isEdit={{true}}
/>

templates.index.hbs

<h2>List users</h2>

<LinkTo @params={{array "add"}} class="btn btn-primary mb-3">
  create another user
</LinkTo>

<table class="table">
	<thead>
  	<tr>
      <th>first name</th>
      <th>last name</th>
      <th>email</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
  	{{#each this.users as |user|}}
    	<tr>
      	<td>{{user.firstName}}</td>
        <td>{{user.lastName}}</td>
        <td>{{user.email}}</td>
        <td>
        	<LinkTo class="btn btn-primary" @params={{array "edit" user}}>
          	edit
          </LinkTo>
        </td>
      </tr>
    {{/each}}
  </tbody>
</table>

twiddle.json

{
  "version": "0.15.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "ember": "3.4.3",
    "ember-template-compiler": "3.4.3",
    "ember-testing": "3.4.3"
  },
  "addons": {
  	"ember-array-helper": "5.0.0",
    "ember-bootstrap": "2.4.0",
    "ember-bootstrap-changeset-validations": "1.0.0",
    "ember-changeset-validations": "1.3.3",
    "ember-router-helpers": "0.2.0"
  }
}

validations.user.js

import { validatePresence, validateFormat } from 'ember-changeset-validations/validators';

export default {
  firstName: validatePresence(true),
  lastName: validatePresence(true),
  email: validateFormat({ type: 'email' })
};