如何在 Angular 2 中将 <input> 绑定到另一个 <input>？答案

【问题标题】：How to bind an <input> to another <input> in Angular 2?如何在 Angular 2 中将 <input> 绑定到另一个 <input>？
【发布时间】：2017-01-30 22:01:19
【问题描述】：

TL;DR: 将输入字段绑定到第二个输入字段会导致无法通过其 FormControl 获取第二个输入字段的值，除非第二个输入字段已由用户直接更改，在这种情况下，FormControl 具有正确的值，正如预期的那样——我可能在绑定类型方面犯了错误？

完整解释：

所以我有这个表格：

<label for="name">Name:</label>
<input type="text" id="name" [formControl]="artistForm.controls['name']" />

<label for="slug">Slug:</label>
<input type="text" id="slug" [formControl]="artistForm.controls['slug']" />

我想实现用户在 input#name 中输入的任何内容也出现在 input#slug 中，但要通过 slug-pipe 或 slug-function 创建名称的 URL 友好版本。

例如：“50 Cent”变成“50-cent”，“Bué the Warrior”变成“bue-the-warrior”。几乎就像 WordPress 中的 slug 是自动生成的一样。

所以我尝试将 input#name 的值绑定到 input#slug，如下所示：

<label for="name">Name:</label>
<input type="text" id="name" [formControl]="artistForm.controls['name']" />

<label for="slug">Slug:</label>
<input type="text" id="slug" (value)="{{ artistForm.controls['name'].value | slug }}" [formControl]="artistForm.controls['slug']" />

这直接适用于输入字段，但与之关联的 formControl 的 value-property 只有在直接编辑输入字段时才会更新。

我想从名称字段生成一个 slug，但仍允许用户手动更改 slug 字段的值。我该如何解决这个问题？

编辑：更新到最新的 Angular 版本，没有解决问题。

【问题讨论】：

标签： angular angular2-forms

【解决方案1】：

您正在使用表单组。所以你应该用表格来做。收听更改，如果名称发生更改并且未设置 slug，则更新 slug

this.formGroup.valueChanges.subscribe((value)={
  if(!value.slug && value.name) this.formGroup.patch({slug: value.name});
});

然后将 [formControl]="artistForm.controls['name']" 修复为 [formControl]="name" 并对 slug 执行相同操作

PS。将 formGroup 替换为您的属性名称

【讨论】：

【解决方案2】：

Volodymyr Bilyachat 的回答对我有很大帮助，但如果不进行一些调整，它就无法正常工作。他完全正确，我必须更新打字稿文件中的 slug 而不是我的模板。然而，当在 formGroup 上使用 valueChanges-observable 时，我收到了这个错误：

Maximum call stack size exceeded

当然，因为整个表单的所有更改都被订阅了，这导致了无限循环。所以我玩弄了代码，结果完美无缺：

this.formGroup.get('name').valueChanges.subscribe(value => {
  const slug = slugify(value); // slugify turns a string into a slug
  this.addArtistForm.get('slug').patchValue(slug);
});

【讨论】：