New Twiddle

components.my-component\.js

import Component from '@ember/component';
import Changeset from "ember-changeset";
import lookupValidator from "ember-changeset-validations";
import {
    validatePresence
} from 'ember-changeset-validations/validators';

const ComponentValidations = {
        email: [
            validatePresence(true)
        ]
};

export default Component.extend({
  init() {
    this._super(...arguments);
            this.changeset = new Changeset(this, lookupValidator(ComponentValidations), ComponentValidations);
        this.changeset.validate();
  },
  
  actions: {
     toggleEmail() {
       if(!this.changeset.get('email')) {
           this.changeset.set('email', 'something');
       } else {
       		this.changeset.set('email', null);
       }
     }
  }
})

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>
{{my-component}}
<br>
<br>

templates.components.my-component\.hbs

<p>Hello inside the component. Here's a button:</p>
<button class="btn" disabled={{changeset.isInvalid}}>"Test" button</button>
<button class="btn" disabled={{this.changeset.isInvalid}}>"Test" button with this</button>
<button class="btn" disabled={{if changeset.isInvalid "disabled"}}>"Test" button with helper</button>


<p>Is changeset invalid? - {{changeset.isInvalid}}</p>
<button {{action "toggleEmail"}}>Toggle email value or empty</button>

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-validations": "3.14.0"
  }
}