Bind FormBuilder Eingangswert mit einem anderen Eingangswert

Question

Ich habe ein Formular mit name und milestone Eingänge. Ich möchte, dass mein Eingabewert milestoneMilestone: + name ist und automatisch aktualisiert wird, wenn mein Benutzer einen Namen eingibt.

Ich versuche ngModel Bindung zu verwenden, um dies zu erreichen.

<!-- My name input --> 
<input mdInput [(ngModel)]="phaseName" formControlName="name" placeholder="Nom" required> 

Und in meinem ts Komponente Konstruktor:

public phaseForm: FormGroup; 
phaseName: string; 

this.phaseForm = fb.group({ 
     'name': ['', Validators.required], 
     'milestone': ['Milestone: ' + this.phaseName, Validators.required] 
    }); 

Aber als der Standardwert von Meilenstein im Konstruktor festgelegt ist, ist es nicht aktualisiert, wie mein Benutzer tippt einen Namen, was soll ich hinzufügen oder tun, um meine Bindung zu erreichen?

Answer 1

können Sie so einstellen. Nach dem Init-Formular-Generator in der ngOnInit() -Methode. Wenn Sie Eingabefeld in Formgroup verwenden können. Es ist bereits zwei Wege Bindung, so dass keine Notwendigkeit, einen Wert binden. wenn Sie einen Formularwert erhalten möchten.

for eg : const phaseFormValue = this.pahseForm.value; 
console.log(phaseFormValue.name); 

ngOnInit(): void { 
this.phaseForm.setValue({milestone:'Milestone: ' + this.phaseName}); 
} 

, wenn Sie Eingabefeld außerhalb verwenden können. dann probiere diesen Code aus.

<input mdInput [(ngModel)]="phaseName" (keypress)="handleKeyboardEvent($event)" placeholder="Name"> 

// Komponente

@HostListener('document:keypress', ['$event']) 
    handleKeyboardEvent(event: KeyboardEvent): void { 
      this.phaseForm.setValue({milestone:'Milestone: ' + this.phaseName}); 
    }; 

Answer 2

Html

<input mdInput formControlName="name" placeholder="Nom" required> 

* no need of ngModel 

Komponente

Wert erhalten

this.phaseForm.value

und Veränderungen erkennen Sie

this.phaseForm.valueChanges .subscribe(data => this.onValueChanged(data));

für die einzelne Eigenschaft tun, könnten Sie tun, wie

nameChangeLog: string[] = []; 
logNameChange() { 
    const nameControl = this.heroForm.get('name'); 
    nameControl.valueChanges.forEach(
    (value: string) => this.nameChangeLog.push(value) 
); 
} 

Kontrolle der cookbook here

Sie Wert initialisieren kann wie vorgeschlagen von Shailesh Ladumor oder an der Stelle, wo Sie die initialisieren bilden.