Form controls for Array of objects

Question

{ 
    id: 123,
    email: "[email protected]",
    password: 108,
    myObj:[
    { id:1, name:"abc", age: 20 },
    { id:2, name:"def", age: 21 },
    { id:3, name:"ghi", age: 22 },
    { id:4, name:"jkl", age: 23 } ] 
}

This is how I'm getting the fields from the server to patch, I'm patching them like this :

this.myForm = this.fb.group({
    id: [],
    email: [],
    password: [],
    myObj: [] 
});

And I need each of myObj Array to be a separate form control. I tried to access them from the HTML in different ways, (like formControlName = myObj[0] , formControlName = myObj.name ) but no success..

How can I access myObj fields in the HTML?

I tried something like this this.myForm = this.fb.group({ id: [], email: [], password: [], myObj: this.fb.array([]) }); but then how do I access it from HTML? as I said formControlName = myObj[0] and formControlName = myObj.name doesn't work.. — Hadas
– Hadas, Commented May 24, 2018 at 7:11

Lia · Accepted Answer · 2018-05-24 07:52:07Z

it should be something like this:

objects: any[] = [];
myObj:[
    { id:1, name:"abc", age: 20 },
    { id:2, name:"def", age: 21 },
    { id:3, name:"ghi", age: 22 },
    { id:4, name:"jkl", age: 23 } ]

ngOnInit() {
    this.myForm = this.fb.group({
        id: [],
        email: [],
        password: [],
        objects: this.formBuilder.array([]) 
    }); 
this.objects = this.myForm.get('objects') as FormArray;
for(let obj of this.myOj){
    this.objects.push(this.createItem());
    }
}

createItem(): FormGroup {
  return this.formBuilder.group({
    id: '',
    name: '',
    age: ''
  });
}

and in template:

<div formArrayName="objects"
  *ngFor="let item of myForm.get('objects').controls; let i = index;">
  <div [formGroupName]="i">
    <input formControlName="id">
    <input formControlName="name">
    <input formControlName="age">
  </div>
</div>

Collectives™ on Stack Overflow

Form controls for Array of objects

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related