Nucleus template

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

form-test.component.js

import Ember from 'ember';

export default Ember.Component.extend({
  
  isValid: true,
  model: {
   	firstname: 'Andy',
    surname: 'Smith',
    email: '',
    phone: '',
    date: '1979-09-09'
  },
 
  didInsertElement() {
    this._super(...arguments);
    // If you want to listen for the form becoming valid/invalid
    const form = document.querySelector('ns-form');
    form.addEventListener('validated', (event) => {
		console.log(event);
			this.set('isValid', event.detail.validation.isValid);
      if(event.detail.validation.isValid) {
      	alert('Form is valid');
      }
    });
    
  },

  actions: {
    
    changeDate() {
    	this.model.date = '2020-12-25';
  	},
     
   	submitForm() {
      const form = document.querySelector('ns-form');
      const formData = form.validate();
      debugger;
      // If you want to scroll to the first invalid field
      const invalidFields = formData.fields.filter(field => {
      	return !field.isValid;
      });
  
      
    }
  }
});

form-test.template.hbs

<ns-form>

<ns-inputter value="no" mask="" separator="" validation="[&quot;isRequired&quot;]" heading="Are you a British Gas customer?" helper="" name="yes">  <input type="radio" id="question-yes" name="question" value="yes">  <label for="question-yes">Yes</label>  <input type="radio" id="question-no" name="question" value="no">  <label for="question-no">No</label></ns-inputter>

<ns-datepicker validation="[&quot;isRequired&quot;]" label="Date" helper="Helper text" value="{{model.date}}" name="date">
  <p slot="tip-details">Some information</p>
</ns-datepicker>

<ns-cta ennable onClick={{action "submitForm"}}>Chnage</ns-cta>

		<!--<ns-inputter name="option" validation="[&quot;isRequired&quot;]" heading="Select an option" helper="">
      <label slot="label">Select an option</label>
      <select name="select">
        <option value="">Please Select an option</option>
        <option value="value-01">One</option>
        <option value="value-02">Two</option>
        <option value="value-03">Three</option>
        <option value="value-04">Four</option>
      </select>
    </ns-inputter>
  
  <ns-inputter class="triple" validation="[&quot;isRequired&quot;]" heading="How would you prefer to receive updates?" helper="I'm here to provide further detailed information." name="selector-question">
  <ns-selector decoration="boiler" checked="">
    <input type="checkbox" aria-describedby="item-1" id="question-gas" name="selector-question" value="gas" checked="">
    <label for="question-gas">Gas</label>
    <div slot="description" id="item-1">
      <ul class="ul-bullet">
        <li>Wolf plaid crucifix hammock</li>
        <li>Kale chips live-edge</li>
        <li>Subway tile squid godard occupy shabby chic blog hell</li>
      </ul>
    </div>
  </ns-selector>
  <ns-selector decoration="appliance">
    <input type="checkbox" aria-describedby="item-2" id="question-electricity" name="selector-question" value="electricity">
    <label for="question-electricity">Electricity</label>
    <div slot="description" id="item-2">
      <ul class="ul-bullet">
        <li>Fixie snackwave fam, chambray</li>
        <li>Tbh before they sold out blue bottle</li>
        <li>Salvia yuccie stumptown, 90's portland quinoa chambray.</li>
      </ul>
    </div>
  </ns-selector>
  <ns-selector decoration="gas">
    <input type="checkbox" aria-describedby="item-3" id="question-dual" name="selector-question" value="dual-fuel">
    <label for="question-dual">Dual fuel</label>
    <div slot="description" id="item-3">
      <ul class="ul-bullet">
        <li>Jianbing gochujang locavore synth direct.</li>
        <li>Gastropub yuccie crucifix locavore helvetica offal food truck</li>
        <li>Salvia yuccie stumptown, 90's portland quinoa chambray.</li>
      </ul>
    </div>
  </ns-selector>
</ns-inputter>

    <ns-inputter name="customer" validation='["isRequired"]' heading="Are you a British Gas customer?" helper="Are you a customer?" value="yes">
    <div slot="tip-details">Answer this yes if you are!</div>
        <input type="radio" id="question-yes" name="question" value="yes">
        <label for="question-yes">Yes</label>
        <input type="radio" id="question-no" name="question" value="no">
        <label for="question-no">No</label>
      </ns-inputter>
    <ns-inputter name="products" validation='["isRequired"]' heading="What do you want?" helper="">
      <input type="checkbox" id="question-gas" name="question" value="gas" checked="">
      <label for="question-gas">Gas</label>
      <input type="checkbox" id="question-elec" name="question" value="electricity">
      <label for="question-elec">Electricity</label>
    </ns-inputter>
    <ns-inputter name="firstname" validation='["isRequired", "minLength(10)"]'>
        <label slot="label" for="input-first-name">First name</label>
        {{input value=model.firstname type="text"}}
    </ns-inputter>
    <ns-inputter name="surname" validation='["isRequired", "maxLength(15)"]'>
        <label slot="label" for="input-surname">Surname</label>
        {{input value=model.surname type="text"}}
    </ns-inputter>
    <ns-inputter name="email" validation='["isRequired", "isEmail"]'>
        <label slot="label" for="input-email">Email</label>
        {{input value=model.email type="text"}}
    </ns-inputter>-->
    <ns-cta ennable onClick={{action "submitForm"}}>Submit</ns-cta>
</ns-form>

templates.application.hbs

<main class="ndsn">
<ns-panel decoration="invert-ramp-cyan">
	<div class="splash">
  	<h1 class="h2">Tell us about you</h1>
  </div>
 </ns-panel>
{{form-test}}
</main>

twiddle.json

{
  "version": "0.15.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": true,
    "enable-testing": false
  },
  "dependencies": {
    "nucleus": "https://www.britishgas.co.uk/nucleus/nucleus.min.js?qywytytw",
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "ember": "2.18.2",
    "ember-template-compiler": "2.18.2",
    "ember-testing": "2.18.2"
  },
  "addons": {
    "ember-data": "3.4.2"
  }
}