After submitting the edit form getting null when I check the console

Question

I am using Form Builder and the form group. As soon as I submit the form, I get a null value. Please tell me where the problem is. Below is my code.

My object:

[ { "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>

and my .ts file code is below

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() {
}
}

For reference, I edit the name, but after sending, I get an empty object in the console.

out put:

{firstname: null, lastname: null, city: null, street: null, pincode: zero}

Find the attached screen, screen capture form ,    console image

Answer 1

, FormArray ( users). -, , value . , :

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

FormGroup :

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

FormArray :

<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

, , formarray ( ) ...

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

:

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