如何使用 Ember 从表单中读取自动填写的用户名/密码

Question

现在我有一个有两个输入的表单：用户名和密码。如果我手动输入它们，我的验证功能可以获取这些值。但是，如果这些值是由 broswer 的自动填充功能填充的。由于未触发任何事件，Ember 无法获取该值。 所以我有这个代码（来自https://stackoverflow.com/questions/22324473/browser-autofill-databinding）：

import Ember from 'ember';
export default Ember.TextField.reopen({
  triggerEvents: function () {
    Ember.run.next(this, function () {
      this.$().trigger("change");
    });
  }.on("didInsertElement")
});

我将它导入到 app.js 中

不知何故，它仍然无法正常工作。 didInsertElement 会被自动填充触发吗？我不确定。

我使用this.get('xxx') 来获取值。

如果您有更好的方法让 ember 检测自动填充。我对此持开放态度。

Answer 1

只需为表单字段添加观察者。 示例：

// app/components/test-form.js
import Component from '@ember/component';
    export default Component.extend({
      isChanged: Ember.observer('login', 'password', function() {
        this.validate();
      }),
      validate() {
        let login = this.get('login');
        let password = this.get('password');
        console.log('validate', login, password);
      },
      actions: {
        submit() {
          console.log('submit');
        }
      }
    });


// app/templates/components/test-form.hbs
<form>
  <label>Login
  {{input type="text" value=login change='validate' }}
  </label>
  <label>Password
  {{input type="password" value=password change='validate' }}
  </label>
  <button {{action 'submit'}}>Click</button>
</form>

PS。仅在 Firefox 中测试。