<input>を別のものにバインドする方法<input>角2？

Question

TL;入力フィールドを2番目の入力フィールドにバインドすると、2番目の入力フィールドがFormControlによって直接変更されない限り、FormControlを通じて2番目の入力フィールドの値を取得できなくなります。その場合、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']" /> 

私はどんなユーザーが入力＃名に入ることを達成したいが、入力＃スラグに表示されますが、経由しますslug-pipeまたはslug-functionを使用すると、名前のURLフレンドリなバージョンが作成されます。

たとえば、「50セント」は「50セント」に、「ブエ・ザ・ウォリアー」は「ブエ・ザ・ウォリアー」に変わります。 WordPressのプラグインは自動的に生成されます。

だから私はこのような入力＃スラグに入力＃名の値を結合しようとした：

<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の値-プロパティのみを取得入力フィールドが直接編集されたときに更新されます。

名前フィールドからスラッグを生成したいが、ユーザーがスラグフィールドの値を手動で変更できるようにしたい。これをどうやって解決するのですか？

EDIT：最新アンギュラバージョンに更新、問題を解決しませんでした。

Answer 1

でformGroupを交換しボロディミールBilyachatによって答えは私に多くのことを助けたが、それはいくつかの調整なしで動作しませんでした。彼は私のテンプレートの代わりにtypescriptファイルのslugを更新しなければならないというのはまったく正しいものでした。フォーム全体でのすべての変更が無限ループにもたらされる、に加入しているので、もちろん

Maximum call stack size exceeded 

：しかしformGroupオンに観察valueChanges使用している場合、私はこのエラーを得ました。だから私はコードで遊んで、これは完璧に働いた：

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

Answer 2

フォームグループを使用しています。だからフォームを使ってやるべきです。変更内容を聞いて、名前とスラグとの変更がある場合は、それらは[formControl]="name"こととスラグ

PSのために同じことを行うために[formControl]="artistForm.controls['name']"を修正後のスラグ

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

を更新設定されていません。あなたのプロパティ名