Установить 'didValidate' true только для выбранных полей

Question

Среда

• Ember Версия: 2.0
• Ember CLI Версия: 2.13.0
• Ember CP Validations Версия: 3.4.0

Действия по воспроизведению

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>

ЯШ:

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);
      }
  });
});

Теперь, когда я нажимаю "отправить", вызывается действие changeEmail и, если проверка не проходит, устанавливается this.set('didValidate', true); который включает все три поля validated-input и показывает ошибку проверки для четного поля translation_token. Но мне нужно показать сообщение об ошибке проверки только для current_password и new_email. наоборот, когда проверяется действие

Answer 1

Одним из способов является уникальное имя свойства для didValidate

Например:

<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>

и в js установите для свойства значение true или false вручную для каждого поля:

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});
    }
});    

Это единственный способ?

Answer 2

Один из способов сделать это - создать объект didValidate в компоненте.

didValidate: computed(() => ({})),

И когда вы нажимаете changeEmail в другом, вы можете сделать

['newEmail', 'currentPassword'].forEach(key => {
  this.set(`didValidate.${key}`, true);
});

Который создает ключ для каждого свойства в didValidate объект и устанавливает его true,

Затем в шаблоне вы можете показать ошибку для каждого поля, передав

didValidate.newEmail or didValidate.currentPassword