如何在 ember 表单字段上禁用自动填充答案

【问题标题】：How to disable autofill on ember form field如何在 ember 表单字段上禁用自动填充
【发布时间】：2018-08-20 19:52:41
【问题描述】：

我有一个表格，用于使用 RESTful api 在 ember 中更新 alumni 的详细信息。是否可以防止表单自动填充我之前在模型中的另一条记录对应的表单中输入的数据？

我的更新路由目录中有这些代码（我正在使用 pod-structure）：

controller.js

# app/alumnis/update/controller.js
import Controller from '@ember/controller';
import { get, set } from '@ember/object';

export default Controller.extend({
  firstName: null,

  actions: {
    updateAlumni(value) {
      let firstName = get(this, 'firstName');
      if(firstName) {
        firstName = firstName.charAt(0).toUpperCase() + firstName.slice(1).toLowerCase();
        this.get('store').findRecord('alumni', value).then(function(alumni) {
          alumni.set('firstName', firstName);
          alumni.save();
        });
      }
      this.transitionToRoute('alumnis.show', value)
    },
  },
});

route.js

# app/alumnis/update/route.js
import Route from '@ember/routing/route';
import { set } from '@ember/object';

export default Route.extend({
  model(params) {
    return this.store.findRecord('alumni', params.id);
  },

  setupController(controller, model) {
    set(controller, 'alumni', model);
  }
});

template.hbs

# app/alumnis/update/template.hbs
<form class="alumniForm" {{action "updateAlumni" on="submit"}}>
  <div class="form-group">
    <h3>First Name : {{input name="firstName" type="text" value=firstName placeholder=alumni.firstName autocomplete="off"}}</h3>
  </div>
  <button class="btn btn-primary" {{action "updateAlumni" alumni.id}}>Submit</button>
</form>

router.js

# app/router.js
import EmberRouter from '@ember/routing/router';
import config from './config/environment';

const Router = EmberRouter.extend({
  location: config.locationType,
  rootURL: config.rootURL
});

Router.map(function() {
  this.route('alumnis', function() {
    this.route('show', {path: '/:id'});
    this.route('add', {path: '/add'});
    this.route('update', {path: '/:id/update'});
  });
});

export default Router;

在每次重新加载后首次渲染update 路由时，不会自动填充任何表单字段。但是，一旦我们将数据输入到firstName 输入字段，它就会呈现到模型alumni 中任何其他记录的update 页面中的表单字段。

【问题讨论】：

你试过什么？这通常是浏览器功能或浏览器扩展功能，由浏览器决定是否尊重表单/输入上的autocomplete="off"。 developer.mozilla.org/en-US/docs/Web/Security/…
@NullVoxPopuli ，我已经尝试打开autocomplete="off" 并在隐身模式下访问route，但该字段甚至在单击表单中的输入框之前就已呈现
字段总是被渲染？我现在很困惑
该字段呈现为模型alumni 中任何记录的update 路径中先前输入的值。占位符值是记录中的实际值，但该字段会自动填充为先前访问此路线时作为输入提供的数据。
我用 chrome 和 safari 都试过了。现在，我能够实现它。并感谢您的 cmets

标签： javascript ember.js

【解决方案1】：

当您重新导航到该页面时，在控制器中设置的属性将保持设置状态。
你展示的逻辑让我相信你甚至不需要控制器。您正在修改模型属性、保存它并进行转换。你正在做一个迂回的更新记录的方法，校友记录是你的模型，但你试图从商店重新获取它。

route.js

# app/alumnis/update/route.js
import Route from '@ember/routing/route';
import { set,get } from '@ember/object';

export default Route.extend({
  model(params) {
    return this.store.findRecord('alumni', params.id);
  },

  updateAlumni() {
      let changedAttrs = get(this, 'model').changedAttributes();
      if (changedAttrs.firstName) {
        let firstName = get(this, 'model.firstName').toLowerCase().capitalize();
        set('model.firstName', firstName);
      }
      get(this,'model').save()
      this.transitionToRoute('alumnis.show', get(this,'model'))
    }
});

template.hbs

# app/alumnis/update/template.hbs
<form class="alumniForm" {{action "updateAlumni" on="submit"}}>
  <div class="form-group">
    <h3>First Name : {{input name="firstName" type="text" value=model.firstName placeholder=alumni.firstName autocomplete="off"}}</h3>
  </div>
  <button class="btn btn-primary" {{action "updateAlumni"}}>Submit</button>
</form>

【讨论】：

我收到一个错误：断言失败：您试图定义一个{{link-to "alumnis.update"}}，但没有传递生成其动态段所需的参数。预计在amp/alumnis/update/controller 内找到：controller:alumnis/update，但得到了undefined。您是否忘记在 amp/alumnis/update/controller 中“导出默认值”？”
更改controller.js文件中的updateAlumni()函数并在template.hbs中使用value=alumni.firstName后，我能够避免这个问题。
您还有控制器文件吗？您是否将 id 或模型作为链接的第二个参数传递？
我将 alumni.id 作为链接的第二个参数传递。

【解决方案2】：

我可以通过更改以下代码来解决问题：

controller.js

# app/alumnis/update/controller.js
import Controller from '@ember/controller';
import { get, set } from '@ember/object';

export default Controller.extend({
  firstName: null,

  actions: {
    updateAlumni(value) {
      let alumni = get(this, 'alumni');
      let changedAttrs = alumni.changedAttributes();
      if(changedAttrs.firstName) {
        let firstName = alumni.firstName.toLowerCase().capitalize();
        alumni.set('firstName', firstName);
        alumni.save()
      }
      this.transitionToRoute('alumnis.show', value)
    },
  },
});

template.hbs

# app/alumnis/update/template.hbs
<form class="alumniForm" autocomplete="off" {{action "updateAlumni" on="submit"}}>
  <div class="form-group">
    <h3>First Name : {{input name="firstName" type="text" value=alumni.firstName}}</h3>
  </div>
  <button class="btn btn-primary" {{action "updateAlumni" alumni.id}}>Submit</button>
</form>

app/alumnis/update/route.js没有变化

【讨论】：