angular - 提交编辑表单后得到空值，当我检查控制台时

Question

我正在使用 Form Builder 和表单组。提交表单后，我将获得空值。请告诉我问题出在哪里。下面是我的代码。

我的目标是:

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

我的.ts文件代码如下

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

作为引用，我编辑了名字，但提交后我在控制台中得到空对象。

输出是:

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

请查看附件屏幕 ,

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>