angular – 在提交编辑表单获取空值后,当我检查控制台时

发布时间：2020-12-17 17:10:42 所属栏目：安全来源：网络整理

导读：我正在使用表单生成器和表单组. 一旦我提交表格,我将获得空值.请告诉我问题出在哪里. 以下是我的代码. 我的目标是： [ { "firstname": "ramu","lastname": "mothukuri","city": "chennai","street": "sivan koiil street","pin": "600024" } ] form [formGro

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

我的目标是：

[ { "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:
null}

请找到附加的屏幕
screen shot form,
????console image

解决方法

首先,我们正在处理一个数组,所以你需要的是一个FormArray(这里我将它命名为users).其次,您需要将值设置为表单控件,在这种情况下值是无用的.所以你的表单构建应如下所示：

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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!