Stackoverflow Question #42921997

components.masked-input-field.js

import Ember from 'ember';

export default Ember.Component.extend({
  actions: {
    update(value) {
      this.get('onupdate')(value);
      this.get('onvalidate')();
    }
  }
});

controllers.application.js

import Ember from 'ember';
import UserValidations from '../user-validation';

export default Ember.Controller.extend({
  UserValidations,
  genders: [{
    key: 'm',
    label: 'Male'
  }, {
    key: 'f',
    label: 'Female'
  }],
  countries: ["","England","France","Italy","Spain","Turkey","USA"],
  model:{},
	actions: {
    submit() { 
    }
  }
});

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{#validated-form
  model        = (changeset model UserValidations)
  on-submit    = (action "submit")
  submit-label = 'Save' as |f|}}

  {{f.input label="First name" name="firstName"}}
  {{f.input label="Last name" name="lastName"}}

  {{f.input type="textarea" label="About me" name="aboutMe"}}

  {{f.input
    type     = "select"
    label    = "Country"
    name     = "country" 
    options  = countries
    value    = model.country
    }}

  {{f.input type="radioGroup" label="Gender" name="gender" options=genders}}
  
  {{#f.input label="Credit Card" name="creditCard" as |fi|}}
  	{{masked-input-field mask='1111 1111 1111 1111' onvalidate=fi.setDirty onupdate=fi.update value=fi.value}}
  {{/f.input}}

{{/validated-form}}
<br>
<br>

templates.components.masked-input-field.hbs

{{masked-input mask=mask on-change=(action 'update' value='target.value') value=value}}

twiddle.json

{
  "version": "0.12.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.12.0",
    "ember-template-compiler": "2.12.0",
    "ember-testing": "2.12.0"
  },
  "addons": {
    "ember-cli-maskedinput": "0.1.2",
    "ember-validated-form": "0.1.10"
  }
}

user-validation.js

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


export default {
  firstName: [
    validatePresence(true),
    validateLength({min: 3, max: 40})
  ],
  lastName: [
    validatePresence(true),
    validateLength({min: 3, max: 40})
  ],
  aboutMe: [ validateLength({allowBlank: true, max: 200}) ],
  country: [ validatePresence(true) ],
  gender: [ validatePresence(true) ],
  creditCard: [validatePresence(true),
    validateLength({is:16})]
};