Ember form-for 插件的文本字段 onblur 不工作

Question

使用最新的Ember版本3.11

我试过 onblur 和 focusOut，但 focusOut 抛出错误，因为它是无标记组件。 None 他们正在工作。

我正在尝试构建一个用户表单并在用户从现场模糊时验证输入。

我正在一起使用以下插件

组件模板文件

{{#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 没有被触发的原因，因为 no attribute onblur 在 text 中-field.hbs

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

从 form 传递的 onblur 没有附加到它。我在插件文件中的 f.control 下添加了 onblur=onblur(text-field.hbs) 直接用于检查，现在工作正常。

Ember form-for 插件的文本字段 onblur 不工作

Ember form-for addon's text-field onblur not working

javascript

ember.js