Question

我正在使用表单生成器和表单组。一旦我提交表格，我将获得空值。请告诉我问题出在哪里。以下是我的代码。

我的目标是：

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

作为参考我编辑了第一个名字，但在提交后我在控制台中得到了空对象。

out put是：

{firstname：null，lastname：null，city：null，street：null，pincode：空}

请找到随附的屏幕 screen shot 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>

<强> the docs

如果您知道阵列中只有一个用户，则可以完全跳过formarray，只从数组中的第一个（也是唯一的）对象中提取数据...

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

然后模板就像：

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

在提交编辑表单获取空值后，当我检查控制台

1 个答案: