nach dem Senden Bearbeitungsformular NULL-Wert erhalten, wenn ich Konsole

Question

Ich benutze Form Builder und Formulargruppe. Sobald ich das Formular abschicke, bekomme ich null Wert. Bitte sag mir, wo das Problem liegt. Unten ist mein Code.

Mein Ziel ist:

[ { "firstname": "ramu", "lastname": "mothukuri", "city": "chennai", "street": "sivan koiil street", "pin": "600024" } ] 


    <form [formGroup]="myForm" (ngSubmit)="onMy()"><div *ngFor="let data of myarray; let i = index">{{data | json}} 
<div class="form-group"><label for="firstname">First Name</label><input type="text" value="{{data.firstname}}" class="form-control" name="firstname" formControlName="firstname"></div> 
<div class="form-group"><label for="lastname">Last Name</label><input type="text" class="form-control" name="lastname" formControlName="lastname"></div> 
<div class="form-group"><label for="city">City</label><input type="text" class="form-control" name="city" formControlName="city" ></div> 
<div class="form-group"><label for="street">Street</label><input type="text" class="form-control" name="street" formControlName="street" ></div> 
<div class="form-group"><label for="pincode">Pin Code</label><input type="text" class="form-control" name="pincode" formControlName="pincode"></div></div 
><div class="form-group"><button type="submit">Submit</button></div></form> 

und meine .ts Datei Code wird unter

import { Component, OnInit } from '@angular/core'; 
import { NgbModal, ModalDismissReasons } from '@ng-bootstrap/ng-bootstrap'; 
import { FormGroup, FormControl,FormBuilder,Validators } from '@angular/forms'; 
import { routerTransition } from '../../router.animations'; 
@Component({ 
selector: 'app-home', 
templateUrl: './home.component.html', 
styleUrls: ['./home.component.scss'], 
animations: [routerTransition()] 
}) 
export class HomeComponent implements OnInit { 
myForm: FormGroup; 
myarray=[]; 
constructor (private fb: FormBuilder) { 
this.myarray=[{"firstname":"ramu","lastname":"mothukuri","city":"chennai","street":"sivan koiil street","pin":"600024"}]; 
this.myForm = this.fb.group({ 
firstname: [], 
lastname: [], 
city:[], 
street: [], 
pincode: [] 
}); 
} 
onMy(){ 
console.log(this.myForm.value); 
} 
ngOnInit() { 
} 
} 

als Referenz i bearbeitet Vorname bin gegeben, aber nach der Einreichung ich bin leeres Objekt in der Konsole bekommen.

heraus gesetzt ist:

{Vorname: null, Nachname: null, Stadt: null, Straße: null, PIN-Code: null}

Bitte finden Bildschirm angebracht screen shot form, console image

Answer 1

Zunächst haben wir es mit einem Array zu tun, also was Sie brauchen, ist ein FormArray (hier habe ich Namen d es users). Zweitens müssen Sie Ihre Werte auf die Formularsteuerelemente einstellen, value ist in diesem Fall nutzlos. So Ihre Build Form sollte wie folgt aussehen:

this.myForm = this.fb.group({ 
    users: this.fb.array([]) 
}) 

Dann möchten Sie Ihr Array zu durchlaufen und jedes Objekt als FormGroup auf Ihre Array gesetzt:

let formArr = <FormArray>this.myForm.controls.users; 
this.myArray.forEach(user => { 
    formArr.push(this.fb.group({ 
    firstname: user.firstname 
    // rest of form controls 
    })) 
}) 

Dann in Ihrer Vorlage, die Sie brauchen iterieren Ihre FormArray und markieren jedes formgroup mit dem Indexwert:

<form [formGroup]="myForm" (ngSubmit)="onMy()"> 
    <ng-container formArrayName="users"> 
    <div *ngFor="let user of myForm.controls.users.controls; let i=index" [formGroupName]="i"> 
     <input formControlName="firstname"> 
     <!-- more fields here --> 
    </div> 
    </ng-container> 
</form> 

DEMO

Wenn Sie wissen, dass Sie nur einen Benutzer im Array haben, können Sie die formarray ganz überspringen und extrahieren nur die Daten aus dem ersten (und einzigen) Objekt im Array ...

this.myForm = this.fb.group({ 
    firstname: [this.myArray[0].firstname] 
    ... 
}) 

und Vorlage würde einfach dann wie folgt aussehen:

<form [formGroup]="myForm" (ngSubmit)="onMy()"> 
    <input formControlName="firstname" /> 
    <!-- more fields here --> 
</form>