如何在角度4中的另一个数组内创建FormArray

时间:2018-01-29 18:18:48

标签: angular typescript

下面是我的示例json数组

[ { "firstname": "ramu", "lastname": "mothukuri", "city": "chennai", "street": "sivan koiil street", "pin": "600024","data":[{"company":"xyz","address":"yyy"}] }, ]

我尝试在app.component.ts 文件中的另一个数组中创建数组。当我在控制台检查我没有得到。请帮我怎么创建。以下是我的源代码网址 CODE URL

以下是我的代码



import { Component } from '@angular/core';
import { FormGroup, FormBuilder, Validators, FormArray } from '@angular/forms'

@Component({
selector: 'my-app',
template: `

<select *ngFor="let res of list">
<option>None</option>
<option>{{res.firstname}}</option>
</select>

<form [formGroup]="myForm" (ngSubmit)="onMy(myForm.value)">


<ng-container formArrayName="users">
<div *ngFor="let user of myForm.controls.users.controls; let i=index" [formGroupName]="i">
<input formControlName="firstname">
<input formControlName="lastname">

<textarea rows="15" cols="25" formControlName="street">    
</textarea>

</div>

</ng-container>
<button type="submit">Add</button>

</form>  

<pre>Form values: {{myForm.value | json}}</pre>


`,
styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  users = [ { "firstname": "ramu", "lastname": "mothukuri", "city": "chennai", "street": "sivan koiil street", "pin": "600024","data":[{"company":"xyz","address":"yyy"}] },
]
  list=[{"firstname":"ramu"},{"firstname":"ravi"}];
  myForm: FormGroup;

  constructor(private fb: FormBuilder) { 
    this.myForm = this.fb.group({
      users: this.fb.array([]),data:this.fb.array([])
    });

    let formArr = <FormArray>this.myForm.controls.users;
    this.users.forEach(user => {
      formArr.push(fb.group({
        firstname: user.firstname,
        lastname: user.lastname,
        street:user.street
      }));
    });
  }

  onMy(form) {
    console.log(form);
  }
}
&#13;
&#13;
&#13; enter image description here

0 个答案:

没有答案