余烬表单-作为副词的文本-字段的模糊不工作

Question

使用最新的Ember版本3.11

我尝试了onblur和focusOut，但是focusOut抛出了错误，因为它是一个无标记的组件。他们都不起作用。

我试图构建一个用户表单，并在用户模糊的时候验证输入。

我用下面的副词在一起

• https://github.com/martndemus/ember-form-for
• https://github.com/poteto/ember-changeset
• https://github.com/poteto/ember-changeset-validations

组件模板文件

{{#form-for user submit=(action "submit") as |f|}}
  {{f.text-field "name" autocomplete="off" placeholder="enter name" onblur=(action "validateOnBlur")}}
  {{#if user.error.name}}
    <p>{{user.error.name.validation}}</p>
  {{/if}}
  {{f.email-field "email"}}
  {{#if user.error.email}}
    <p>{{user.error.email.validation}}</p>
  {{/if}}
  {{f.password-field "password" }}
  {{#if user.error.password}}
    <p>{{user.error.password.validation}}</p>
  {{/if}}
  {{f.submit "Create User"}}
{{/form-for}}

组件Javascript文件

import Component from '@ember/component';
import { get }   from '@ember/object';
import Changeset from 'ember-changeset';
import lookupValidator from 'ember-changeset-validations';
import UserValidations from '../../validations/user';

export default Component.extend({
  init() {
    this._super(...arguments);
    this.user = new Changeset(get(this, 'model'), lookupValidator(UserValidations), UserValidations);
  },
  actions:{
    validateOnBlur(changeset, property){
      debugger
    },
    async submit(changeset){
      await changeset.validate();
      if(changeset.isValid){
        changeset.save();
      }
    }
  }
});

验证器

import {
  validatePresence,
  validateLength,
  validateFormat
} from 'ember-changeset-validations/validators';

export default {
  name: validatePresence(true),
  email: [
    validatePresence(true),
    validateFormat({ type: 'email' })
  ],
  password: [
    validatePresence(true),
    validateLength({ min: 8 })
  ]
};

Answer 1

我发现了没有触发 onblur 的原因，因为在中没有属性onblur。

https://github.com/martndemus/ember-form-for/blob/master/addon/templates/components/form-fields/text-field.hbs

来自form的传递的onblur没有连接到它。我直接在addon file(text-field.hbs)中添加了f.control下的，以便进行检查，现在它运行良好。