如何将<input />绑定到Angular 2中的另一个<input />？

Question

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

完整说明：

所以我有这样的表格：

CREATE OR REPLACE FUNCTION database.myFunction(
IN text,IN text)

RETURNS TABLE(firstField, secondField, lastField) AS
$BODY$
--sql string is the variable containing the final sql code
declare sql_string text;
declare regs numeric;


begin
--this is what happens in case count<1
sql_string = 'select 0,0,0';

--now we count them
regs = (select count(firstField) from mytable where a=b)::numeric;

--if >=1, then whe get the whole data
if (regs>=1) then

    sql_string = 'select firstField,secondField, lastField from mytable where a=b';

end if;
--and return to you...
return query EXECUTE sql_string;
end;

我希望实现无论用户输入什么输入#name也出现在input＃slug中，但是通过slug-pipe或slug-function创建一个URL友好版本的名称。

例如：'50 Cent'变成'50 -cent'，'BuétheWarrior'变成'bue-the-warrior'。几乎就是自动生成WordPress中的slug。

所以我尝试将输入#name的值绑定到输入#smpg，如下所示：

<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-field，但是只有在直接编辑输入字段时才会更新与之关联的formControl的value-property。

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

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

Answer 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 替换为您的媒体资源名称

Answer 2

Volodymyr Bilyachat 的回答对我有很大帮助，但如果没有一些调整就行不通。他完全正确，我不得不更新typescript文件中的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);
});