Wie bindet man einen an einen anderen in Angular 2?

Question

TL; DR: Wenn ein Eingabefeld an ein zweites Eingabefeld gebunden wird, kann der Wert des zweiten Eingabefelds nicht über das FormControl abgerufen werden, es sei denn, das zweite Eingabefeld wurde direkt von dem Eingabefeld geändert Benutzer, in welchem ​​Fall die FormControl wie erwartet den richtigen Wert hat - mache ich wahrscheinlich einen Fehler mit der Art der Bindung?

Vollständige Erklärung:

So habe ich diese 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']" /> 

Ich möchte das erreichen, was ein Benutzer in der Eingabe # name tritt erscheint auch in der Eingabe # Slug, aber gehen durch eine Slug-Pipe oder Slug-Funktion, die eine URL-freundliche Version des Namens erstellt.

Zum Beispiel: "50 Cent" wird zu "50-Cent" und "Bué der Krieger" zu "Bue-the-Warrior". Ziemlich genau wie Schnecken in WordPress automatisch generiert werden. So

Ich habe versucht, den Wert des Eingangs # name Bindung an Eingang # Slug wie folgt aus:

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

Dies funktioniert für die Eingabe-Feld direkt, aber der Wert-Eigenschaft des Formcontrol damit verbundenen nur bekommt aktualisiert, wenn das Eingabefeld direkt bearbeitet wurde.

Ich möchte einen Slug aus dem Namensfeld generieren, aber dem Benutzer weiterhin erlauben, den Wert des Slug-Feldes manuell zu ändern. Wie behebe ich das?

EDIT: aktualisiert, um neueste Angular-Version, lösen das Problem nicht.

Answer 1

Die Antwort von Volodymyr Bilyachat half mir sehr viel, aber es funktionierte nicht ohne einige Anpassungen. Er hatte vollkommen recht, dass ich Slug in der Typoskript-Datei anstelle meiner Vorlage aktualisieren musste. Wenn die valueChanges beobachtbare Verwendung auf dem formGroup jedoch habe ich diesen Fehler:

Maximum call stack size exceeded 

Natürlich, denn alle Änderungen in der gesamten Form abonniert wurden, die in einer Endlosschleife führt. Also habe ich mit dem Code rumgespielt und das hat einwandfrei funktioniert:

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

Sie verwenden Formulargruppe. Also solltest du es mit Hilfe von Formularen machen. Hören Sie auf Änderungen und wenn es Wechsel mit Namen und Slug ist nicht gesetzt ihnen Slug aktualisieren

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

Dann [formControl]="artistForm.controls['name']" fix sein [formControl]="name" und das gleiche für Slug

PS. Ersetzen formGroup mit Eigenschaftsnamen