harikr2006 · September 16, 2020 14:17
diff --git a/components.change-password-form\.js b/components.change-password-form\.js
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';

 export default class extends Component {
 	@tracked oldPassword;
    @tracked newPassword;
    @tracked confirmPassword;


    @action
    changeOldPassword(ev) {
      this.oldPassword = ev.target.value;
    }
    @action
    changeNewPassword(ev) {
      this.newPassword = ev.target.value;
    }
    @action
    changeConfirmPassword(ev) {
      this.confirmPassword = ev.target.value;
    }

    @action
    changePassword(ev) {

        // Prevent the form's default action.
        ev.preventDefault();
 				console.log(this.args);
      debugger;
        this.args.changePassword({
            oldPassword: this.oldPassword,
            newPassword: this.newPassword,
            confirmPassword: this.confirmPassword
        });
    }
 }
diff --git a/components.changemy-password\.js b/components.changemy-password\.js
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';

 export default class extends Component {
  @tracked op;
  @tracked np;
  @tracked cp;
  
  @action
  oldPassword(ev){
    this.op = ev.target.value;
  }
   @action
  newPassword(ev){
    this.np = ev.target.value;
  }
  @action
  cnfPassword(ev){
    this.cp = ev.target.value;
  }
  
  @action
  triggerComponent(ev){
    ev.preventDefault();
    this.args.test();
    // this.args.changePasswordController({
    //   oldpassword:this.op,
    //   newpassword:this.np,
    //   cnfpassword:this.cp
    // })
    
  }
  
 }
diff --git a/controllers.application\.js b/controllers.application\.js
 import Controller from '@ember/controller';

 export default Controller.extend({
  actions: {
    changePasswordController(attrs) {
      console.log('I am a controller',attrs);
    },
  
  test(){
    console.log("test");
  }
  }
 });
diff --git a/router\.js b/router\.js
 import EmberRouter from '@ember/routing/router';
 import config from './config/environment';

 const Router = EmberRouter.extend({
  location: 'none',
  rootURL: config.rootURL
 });

 Router.map(function() {
  this.route('change-password');
 });

 export default Router;
diff --git a/routes.application\.js b/routes.application\.js
 import Route from '@ember/routing/route';

 export default class extends Route {
  model() {

        return {
            oldPassword: '',
            newPassword: '',
            confirmPassword: ''
        };
    }
 }
diff --git a/templates.application\.hbs b/templates.application\.hbs
 <h1>Welcome to {{this.appName}}</h1>
 <br>

 test {{this.oldpassword}}
 
 
 <ChangemyPassword @chgpwd= {{this.model}} @triggerComponent={{action 'test'}} />

 <!---ChangePasswordForm @chgpwd={{this.model}} @changePassword={{action 'changePasswordController'}}--/>
diff --git a/templates.components.change-password-form\.hbs b/templates.components.change-password-form\.hbs
 <h2>Change Password</h2>
 <form  {{on "submit" this.changePassword}}>
 <div>
 Old Password: <input type="text" value={{this.oldPassword}} {{on 'input' this.changeOldPassword}}/> {{this.oldPassword}}
 </div>
 <div>
 New Password: <input type="text" value={{this.newPassword}} {{on 'input' this.changeNewPassword}}/>{{this.newPassword}}
 </div>
 <div>
 Confirm Password: <input type="text" value={{this.confirmPassword}}
 {{on 'input' this.changeConfirmPassword}}/>{{this.confirmPassword}}
 </div>
 <button type="submit" class="btn btn-primary block full-width m-b" >Submit</button>
 </form>

diff --git a/templates.components.changemy-password\.hbs b/templates.components.changemy-password\.hbs
 <h2>Change Password</h2>

 <div>
 Old Password: <input type="text" value={{this.op}} {{on 'input' oldPassword}} /> {{this.op}}
 </div>
 <div>
 New Password: <input type="text" value={{this.np}} {{on 'input' newPassword}} /> {{this.np}}
 </div>
 <div>
 Confirm Password: <input type="text" value={{this.cp}}
 {{on 'input' cnfPassword}}/>{{this.cp}}
 </div>
 <button type="submit" class="btn btn-primary block full-width m-b"{{on "click" this.triggerComponent}} >Submit</button>
diff --git a/twiddle\.json b/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"
  }
 }
	import Component from '@glimmer/component';
	import { tracked } from '@glimmer/tracking';
	import { action } from '@ember/object';

	export default class extends Component {
	@tracked oldPassword;
	@tracked newPassword;
	@tracked confirmPassword;


	@action
	changeOldPassword(ev) {
	this.oldPassword = ev.target.value;
	}
	@action
	changeNewPassword(ev) {
	this.newPassword = ev.target.value;
	}
	@action
	changeConfirmPassword(ev) {
	this.confirmPassword = ev.target.value;
	}

	@action
	changePassword(ev) {

	// Prevent the form's default action.
	ev.preventDefault();
	console.log(this.args);
	debugger;
	this.args.changePassword({
	oldPassword: this.oldPassword,
	newPassword: this.newPassword,
	confirmPassword: this.confirmPassword
	});
	}
	}
	import Controller from '@ember/controller';

	export default Controller.extend({
	actions: {
	changePasswordController(attrs) {
	console.log('I am a controller',attrs);
	},

	test(){
	console.log("test");
	}
	}
	});
	import EmberRouter from '@ember/routing/router';
	import config from './config/environment';

	const Router = EmberRouter.extend({
	location: 'none',
	rootURL: config.rootURL
	});

	Router.map(function() {
	this.route('change-password');
	});

	export default Router;
	import Route from '@ember/routing/route';

	export default class extends Route {
	model() {

	return {
	oldPassword: '',
	newPassword: '',
	confirmPassword: ''
	};
	}
	}
	<h1>Welcome to {{this.appName}}</h1>
	<br>

	test {{this.oldpassword}}


	<ChangemyPassword @chgpwd= {{this.model}} @triggerComponent={{action 'test'}} />

	<!---ChangePasswordForm @chgpwd={{this.model}} @changePassword={{action 'changePasswordController'}}--/>
	<h2>Change Password</h2>
	<form {{on "submit" this.changePassword}}>
	<div>
	Old Password: <input type="text" value={{this.oldPassword}} {{on 'input' this.changeOldPassword}}/> {{this.oldPassword}}
	</div>
	<div>
	New Password: <input type="text" value={{this.newPassword}} {{on 'input' this.changeNewPassword}}/>{{this.newPassword}}
	</div>
	<div>
	Confirm Password: <input type="text" value={{this.confirmPassword}}
	{{on 'input' this.changeConfirmPassword}}/>{{this.confirmPassword}}
	</div>
	<button type="submit" class="btn btn-primary block full-width m-b" >Submit</button>
	</form>
	{
	"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"
	}
	}