Skip to content

Instantly share code, notes, and snippets.

@tehmaestro
Last active January 29, 2021 11:15
Show Gist options
  • Save tehmaestro/af4b69756b682ca2cc6ee1d97d499ab6 to your computer and use it in GitHub Desktop.
Save tehmaestro/af4b69756b682ca2cc6ee1d97d499ab6 to your computer and use it in GitHub Desktop.
New Twiddle
import Component from '@glimmer/component';
import { action } from '@ember/object';
import { tracked } from '@glimmer/tracking';
import LoginValidations from '../validations/login';
import lookupValidator from 'ember-changeset-validations';
import { Changeset } from 'ember-changeset';
import MyChangeset from './my-changeset';
import { scheduleOnce, schedule } from '@ember/runloop';
export default class extends Component {
username = '';
password = '';
constructor() {
super(...arguments);
this.changeset = Changeset(this, lookupValidator(LoginValidations), LoginValidations, {changeset: MyChangeset});
schedule('afterRender', () => {
this.changeset.validate();
});
this.x = 3;
this.x = 'asd';
this.x = 'y';
this.y = 4;
}
@action
submit() {
this.changeset.save();
console.log('Username: ' + this.username + ' Password: ' + this.password);
console.log(this.changeset.error.password);
if(this.changeset.error.password) {
console.log('IT IS TRUE');
}
console.log(this.changeset.dirtyAttributes.password);
}
@action
handleInput(type, e) {
this.changeset[type] = e.target.value;
}
}
import { EmberChangeset } from 'ember-changeset';
export default class MyChangeset extends EmberChangeset {
dirtyAttributes = {}
_setProperty({ key, value, oldValue }) {
super._setProperty(...arguments);
console.log(value, oldValue);
if(value !== oldValue) {
this.safeSet(this.dirtyAttributes, key, true);
}
}
}
import Controller from '@ember/controller';
export default class ApplicationController extends Controller {
appName = 'Ember Twiddle';
}
<h1>Welcome to {{this.appName}}</h1>
<br>
<br>
<LoginForm />
<br>
<br>
<input type="text" {{on "input" (fn this.handleInput "username")}} value={{this.username}} />
{{#if (and this.changeset.error.username this.changeset.dirtyAttributes.username)}}
<br/>
<span>{{this.changeset.error.username.validation.[0]}}</span>
{{/if}}
<br/>
<input type="text" {{on "input" (fn this.handleInput "password")}} value={{this.password}} />
{{#if this.changeset.error.password.validation}}
ERROR is set -
{{#if this.changeset.dirtyAttributes.password}}
ATTRIBUTE DIRTY
<br/>
<span>{{this.changeset.error.password.validation}}</span>
{{/if}}
{{else}}
ERROR NOT set
{{/if}}
<br/>
<button {{on "click" this.submit}}>Send</button> - {{#if this.changeset.isInvalid}}DISABLED{{else}}enabled{{/if}}
{
"version": "0.17.1",
"EmberENV": {
"FEATURES": {},
"_TEMPLATE_ONLY_GLIMMER_COMPONENTS": false,
"_APPLICATION_TEMPLATE_WRAPPER": true,
"_JQUERY_INTEGRATION": true
},
"options": {
"use_pods": false,
"enable-testing": false
},
"dependencies": {
"jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js",
"ember": "3.18.1",
"ember-template-compiler": "3.18.1",
"ember-testing": "3.18.1"
},
"addons": {
"@glimmer/component": "1.0.0",
"ember-changeset": "3.0.0",
"ember-changeset-validations": "3.10.3",
"ember-truth-helpers": "3.0.0"
}
}
import {
validatePresence,
validateLength,
validateConfirmation,
validateFormat
} from 'ember-changeset-validations/validators';
export default {
username: [
validatePresence(true),
validateLength({ min: 3 })
],
password: validatePresence(true)
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment