ember-bootstrap block form form.element validation

contact.hbs

{{#bs-form model=contact onSubmit=(route-action "submitMessage" model) as |form|}}
  
  {{!-- this doesn't work! --}} 
  {{#form.element label="Email Address" property="email" as |el|}}
    <div class="input-group">
      <span class="input-group-addon"><i class="fa fa-envelope-o"></i></span>
      <input value={{el.value}} class="form-control" oninput={{action (mut el.value) value="target.value"}} id={{el.id}} type="email">
    </div>
  {{/form.element}}
  
  {{!-- this works! --}} 
  {{form.element controlType="email" label="Email Address" property="email"}}
  
{{/bs-form}}

contact.js

import DS from 'ember-data';
import {validator, buildValidations} from 'ember-cp-validations';

const Validations = buildValidations({
  email: [
    validator('presence', true),
    validator('format', {type: 'email'})
  ],
  message: [
    validator('presence', true),
    validator('length', {
      min: 5
    })
  ]
});

export default DS.Model.extend(Validations, {
  email: DS.attr('string'),
  message: DS.attr('string')
});