仅对选定字段设置 'didValidate' true答案

【问题标题】：set 'didValidate' true only for selected fields仅对选定字段设置 'didValidate' true
【发布时间】：2017-12-17 05:04:28
【问题描述】：

环境

Ember 版本：2.0
Ember CLI 版本：2.13.0
Ember CP 验证版本：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>

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

现在，当我点击提交时，会调用 changeEmail 操作，如果验证失败，它会设置 this.set('didValidate', true); 以启用所有 三个验证输入字段，甚至显示 confirmation_token 字段的验证错误。但我只需要为 current_password 和 new_email 显示验证错误消息。当调用 verify 操作时，反之亦然

【问题讨论】：

标签： ember.js ember-data ember-cli ember-cp-validations

【解决方案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});
    }
});

这是唯一的方法吗？

【讨论】：

【解决方案2】：

一种方法是在组件上创建一个 didValidate 对象

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

当你点击 else 中的 changeEmail 时，你可以做

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

它为didValidate 对象中的每个属性创建一个键并将其设置为true。

然后在模板中你可以通过传递来显示每个字段的错误

didValidate.newEmail or didValidate.currentPassword

【讨论】：