Formcontrol leeren Wert in Angular 2

Question

Rückkehr Ich verwende eine Form

<form [formGroup]="form"> 
    <input type="text" value={{userDetails.first_name}} formControlName = "firstName"> 
    <button type="submit" data-action="save" (click)="onSubmit(form.value)"> 
</form> 

Hier userDetails.first_name Wert Tom ist. Es ist auf der Benutzeroberfläche innerhalb des Textfelds sichtbar. aber wenn ich Formular einsenden form.firstName gibt mir leeren Wert.

Answer 1

Um den Wert zu erhalten, sollten Sie form.value.firstName nicht form.firstName überprüfen.

Um eine bessere Vorstellung davon zu bekommen, wie die Form strukturiert ist, machen Sie eine console.log(this.form) auf Formular senden.

Answer 2

Declare Form Gruppe:

private userForm: FormGroup; 

initialisieren Benutzerformular wie folgt aus:

userForm = form.group({ 
      firstName: [firstName, [Validators.required]] 
     }); 

in HTML wie dieses Erklären Sie Ihre Form:

<form class="example-form " [formGroup]="userForm" 
        (ngSubmit)="onSubmit(userForm)"> 
    <input type="text" value={{userDetails.firstName}} formControlName = 
     "firstName"> 
    <button type="submit" data-action="save"/> 
</form> 

Machen Sie Ihre onSubmit() -Methode wie dies:

onSubmit({formValue, valid}: { formValue: UserDetails, valid: boolean }) { 
    const firstName= value.firstName; 
} 

Answer 3

html

<form [formGroup]="form"> 
    <input type="text" formControlName="firstName"> 
    <button type="submit" data-action="save" (click)="onSubmit(form.value)"> 
</form> 

Komponente

können Sie Wert gesetzt wie die

this.form.patchValue({firstName:this.userDetails.first_name}); 

stellen Sie sicher Instanz Form Gruppe in die Komponente

Answer 4

Leider schaffen für die späte Antwort .Answer von @Shailesh vorgeschlagen arbeitete für mich, ich flickte Formularwerte nach dem Aufruf einer Methode im Dienst. Danke Jungs für Ihre nützliche Zeit