New Twiddle

components.login-form\.js

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;
  }
}

components.my-changeset\.js

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);
    }
  }
}

controllers.application\.js

import Controller from '@ember/controller';

export default class ApplicationController extends Controller {
  appName = 'Ember Twiddle';
}

templates.application\.hbs

<h1>Welcome to {{this.appName}}</h1>
<br>
<br>
<LoginForm />
<br>
<br>

templates.components.login-form\.hbs

<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}}

twiddle\.json

{
  "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"
  }
}

validations.login\.js

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

export default {
  username: [
    validatePresence(true),
    validateLength({ min: 3 })
  ],
  password: validatePresence(true)
};