Angular - How to call object property from collection in Form input

Question

Please help, I have collection in angular component:

 collection: collectionAbs[];
    
 export interface collectionAbs{
   name: string;
   prop: string;
   secondProp: number;
 }

And I initialize:

    this.collection.forEach((item ,index) => {
      formGroup.addControl(index.toString() + "-prop", new FormControl('', [Validators.required])),
      formGroup.addControl(index.toString() + "-secondProp", new FormControl('', [Validators.required]))
    });

Object is initiated and I want to update properties in form. I have something like this:

  <div *ngFor="let item of collection; let i = index" >
         <input type="text" name="collection[{{i}}].prop">
         <input type="number" name="collection[{{i}}].secondProp">
  </div>

But I haven't no idea how to assign now this values to my objects collection. Maybe someone have better solution for this problem?

@Edit

FormGroup:

 var formGroup: FormGroup;

 formGroup = new FormBuilder().group({
   anotherFormInputOne: new FormControl(null, [Validators.required]),
   anotherFormInputTwo: new FormControl(null, [Validators.required])
 });

Thanks!

Not exactly, I have a collection already created and I want to display the inputs for property for all objects. I just want to add a value to the property for each element. — Mateusz Duda
– Mateusz Duda, Commented Jan 11, 2021 at 18:31

Chris · Accepted Answer · 2021-01-12 17:20:06Z

1

it should just be a case on submit of the form of doing:

    this.collection.forEach((item ,index) => {
      item.prop = formGroup.controls[index.toString() + "-prop"].value;
      item.secondProp = formGroup.controls[index.toString() + "-secondProp"].value;
    });

answered Jan 12, 2021 at 17:20

Chris

818 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular - How to call object property from collection in Form input

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