This question is related to Ember Octane Upgrade How to pass values from component to controller
I was struggling to receive and assign values from an HBS form into a component and then pass it to the controller. The working answer showed that I had to create an @action
function for each form field. For example:
@action
changeNewPassword(ev) {
this.newPassword = ev.target.value;
}
But, I do not understand where or how those functions are called and so I do not understand why they work. Does anyone know how these functions are called?
Template Component HBS
<div class="middle-box text-center loginscreen animated fadeInDown">
<div>
<h3>Change Password</h3>
<form class="m-t" role="form" >
<div class="error-alert"></div>
<div class="form-group">
<Input @type="password" class="form-control" placeholder="Old Password" @value= required="true" />
</div>
<div class="form-group">
<Input @type="password" class="form-control" placeholder="New Password" @value= required="true" />
</div>
<div class="form-group">
<Input @type="password" class="form-control" placeholder="Confirm Password" @value= required="true" />
</div>
<div>
<button type="submit" class="btn btn-primary block full-width m-b">Submit</button>
</div>
</form>
</div>
</div>
Template HBS
<Clients::ChangePasswordForm @chgpwd= @changePassword= @errors= />
Template Component JS
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';
export default class ChangePasswordForm extends Component {
@tracked oldPassword;
@tracked newPassword;
@tracked confirmPassword;
@tracked errors = [];
@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) {
ev.preventDefault();
this.args.changePassword({
oldPassword: this.oldPassword,
newPassword: this.newPassword,
confirmPassword: this.confirmPassword
});
}
}
Aucun commentaire:
Enregistrer un commentaire