Skip to content

Instantly share code, notes, and snippets.

@alexdiliberto
Last active April 28, 2018 01:53
Show Gist options
  • Save alexdiliberto/a2f3c3fa0704e4cfb041b77b6c492ff2 to your computer and use it in GitHub Desktop.
Save alexdiliberto/a2f3c3fa0704e4cfb041b77b6c492ff2 to your computer and use it in GitHub Desktop.
Simple Input Mask
import Ember from 'ember';
const {
get,
set
} = Ember;
export default Ember.Controller.extend({
actions: {
updateSsn(event) {
let user = get(this, 'model');
let value = event.target.value;
let newSsn = value.replace(/-/g, '');
if (newSsn.length <= 9) {
set(user, 'ssn', newSsn);
}
user.notifyPropertyChange('ssn');
}
}
});
import Model from 'ember-data/model';
import attr from 'ember-data/attr';
export default Model.extend({
name: attr('string'),
ssn: attr('string'),
formattedSsn: Ember.computed('ssn', function() {
let ssn = this.get('ssn') || '';
let first = ssn.toString().substr(0, 3);
let second = ssn.toString().substr(3, 2);
let third = ssn.toString().substr(5, 4);
let formattedSsn = '';
if (first) {
formattedSsn += first;
if (first.length === 3) {
formattedSsn += '-';
}
}
if (second) {
formattedSsn += second;
if (second.length === 2) {
formattedSsn += '-';
}
}
if (third) {
formattedSsn += third;
}
return formattedSsn;
})
});
import Ember from 'ember';
export default Ember.Route.extend({
model() {
return this.get('store').createRecord('user', {
name: 'Alex',
ssn: ''
});
}
});
<h1>Simple Input Mask</h1>
<form>
<p>
<label>Name:</label>
{{input value=model.name}}
</p>
<p>
<label>SSN:</label>
<input
value={{model.formattedSsn}}
oninput={{action "updateSsn"}}
pattern="\d{3}-?\d{2}-?\d{4}"
required>
</p>
<button type="submit">Submit</button>
</form>
<p>model.name={{model.name}}</p>
<p>model.ssn={{model.ssn}}</p>
<p>model.formattedSsn={{model.formattedSsn}}</p>
{
"version": "0.13.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.16.2",
"ember-template-compiler": "2.16.2",
"ember-testing": "2.16.2"
},
"addons": {
"ember-data": "2.16.3"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment