Emberjs实时服务器端验证

时间:2016-11-13 00:28:23

标签: forms validation ember.js

我设法将输入发送到我的服务器,如果输入有效则服务器响应,否则返回错误对象。

我只是不确定如何使用返回的错误对象来实际执行某些操作。互联网上有很多关于如何遍历错误对象并显示消息的例子,但这并不是我所追求的。

我有一个表单组件,其中包含一堆看起来像的字段:

{{input type="text" value=account.twitterId class="input" focus-out="validateInput"}}

并且组件中的validateInput看起来像

validateInput() {
  let account = get(this, 'account');

  account.save().then(() => {
    console.log('success!'); // add class to the input field
  }).catch((adapterError) => {
    console.log(account.get('errors')); // add different class to the input field
    console.log(adapterError);
  });
},

如上所述,这会触发并返回成功或错误消息

但是如何获取结果并使用它将类添加到输入字段的类键?

我确实试过以下

  hasError: false,

  actions: {

  validateInput() {
    let account = get(this, 'account');

    account.save().then(() => {
      set(this, 'hasError', false);
    }).catch((adapterError) => {
      set(this, 'hasError', true);
    });
  },

}

然后在前面有一个if语句,如果用户第二次更改输入,哪种工作但没有重新触发。

我应该为此使用计算属性吗?如果是这样,人们怎么看?

1 个答案:

答案 0 :(得分:2)

你的计划应该有效。我创造了一个Ember Twiddle,您可以将其作为参考。我稍微调整了模型以允许从save()方法返回的随机成功/失败承诺,但其余的与您发布的内容完全相同。从变幅器中跳出来打开你的控制台,看看返回的承诺的结果。我使用像你建议的模板条件来隐藏/向用户显示一些反馈。

https://ember-twiddle.com/3398d28381a4c0afb71cb5d59f271e36

如果您对实施与我在旋转中所拥有的内容有任何疑问,请与我们联系。 ✌