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

Question

TL;DR: binding an input-field to a second input-field results in not being able to get the value of the second input-field through its FormControl, unless the second input-field has been changed directly by the user, in which case the FormControl has the correct value, as expected -- I'm probably making a mistake with the type of binding?

Full explanation:

So I have this form:

<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']" />

I want to achieve that whatever a user enters in input#name also appears in input#slug, but going through a slug-pipe or slug-function which creates a URL-friendly version of the name.

For example: '50 Cent' turns into '50-cent' and 'Bué the Warrior' to 'bue-the-warrior'. Pretty much the way slugs in WordPress are generated automatically.

So I tried binding the value of input#name to input#slug like this:

<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']" />

This works for the input-field directly, but the value-property of the formControl associated with it only gets updated when the input-field has been edited directly.

I want to generate a slug from the name-field, but still allow the user to change the value of the slug-field manually. How do I fix this?

EDIT: updated to latest Angular-version, didn't solve the problem.

Answer 1

You are using form group. So you should do it using forms. Listen to changes and if there is change with name and slug is not set them update slug

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

Then fix [formControl]="artistForm.controls['name']" to be [formControl]="name" and do the same for slug

PS. Replace formGroup with your property name

Answer 2

The answer by Volodymyr Bilyachat helped me a great deal, but it didn't work without some adjustments. He was totally right that I had to update slug in the typescript file instead of my template. When using the valueChanges-observable on the formGroup however, I got this error:

Maximum call stack size exceeded

Of course, because all changes in the entire form were subscribed to, which results in an endless loop. So I played around with the code and this worked flawlessly:

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