set 'didValidate' true only for selected fields - ember.js

Question

Environment
Ember Version: 2.0
Ember CLI Version: 2.13.0
Ember CP Validations Version: 3.4.0
Steps to Reproduce
hbs:
<div>
<label> Email: <label>
{{validated-input model=this placeholder="Enter new email" valuePath='new_email' id="new_email" didValidate=didValidate}}
<label> Password: <label>
{{validated-input model=this placeholder="Enter current password" valuePath='current_password' id="current_password" didValidate=didValidate}}
<button {{action "changeEmail"}}>Submit</button>
</div>
<div>
<label> Confirmation Token: <label>
{{validated-input model=this placeholder="Enter confirmation token" valuePath='confirmation_token' id="confirmation_token" didValidate=didValidate}}
<button {{action "verify"}}>Verify</button>
</div>
js:
import Ember from 'ember';
import { validator, buildValidations } from 'ember-cp-validations';
const Validations = buildValidations({
new_email: [
validator('presence', true),
validator('format', { type: 'email' })
],
current_password: [
validator('presence', true)
],
confirmation_token: [
validator('presence', true),
]
});
export default Ember.Component.extend(Validations, {
changeEmail: function() {
this.validate().then(() => {
if (this.get('validations.attrs.new_email.isValid') && this.get('validations.attrs.current_password.isValid')) {
...
....
} else {
this.set('didValidate', true);
}
});
});
Now when I click submit, changeEmail action is called and if validation fails it sets this.set('didValidate', true); which enables all the three validated-input field and shows validation error for even confirmation_token field. But i need to show validation error message only for current_password and new_email. vice versa when verify action is called

Answer 1

one way of doing is, unique property name for didValidate
For eg:
<div>
<label> Email: <label>
{{validated-input model=this placeholder="Enter new email" valuePath='new_email' id="new_email" didValidate=didValidateEmail}}
<label> Password: <label>
{{validated-input model=this placeholder="Enter current password" valuePath='current_password' id="current_password" didValidate=didValidatePassword}}
<button {{action "changeEmail"}}>Submit</button>
</div>
<div>
<label> Confirmation Token: <label>
{{validated-input model=this placeholder="Enter confirmation token" valuePath='confirmation_token' id="confirmation_token" didValidate=didValidateToken}}
<button {{action "verify"}}>Verify</button>
</div>
and in js set the property to true or false manually for each field:
changeEmail: function() {
this.validate().then(() => {
if (this.get('validations.attrs.new_email.isValid') && this.get('validations.attrs.current_password.isValid')) {
...
....
} else {
this.setProperties({didValidateEmail: true, didValidatePassword: true});
}
});
Is this the only way ?

Answer 2

One way to do this is to create a didValidate object on the component
didValidate: computed(() => ({})),
And when you click changeEmail in the else you can do
['newEmail', 'currentPassword'].forEach(key => {
this.set(`didValidate.${key}`, true);
});
Which creates a key for each property in the didValidate object and sets it to true.
Then in the template you can show the error for each field by passing
didValidate.newEmail or didValidate.currentPassword