Map angular formarray with model

Question

I have this form and I need to map the model to form array declaration.

  formGroup: FormGroup;
    builder: FormBuilder

    
    data :{
        lineItems : [
          {
            qty: null,
            item: null
          }
        ]
    }
    
    this.formGroup = this.builder.group({
        lineItems: this.builder.array([
            {
            item: [this.lineItems.item, Validators.required],
            }
        ])
    });

I have doubts about this "item: [this.data.lineItems.item, Validators.required]" domain.lineItems is an array and how can I map it with each formbuilder array.

    <div formArrayName="classmates">
        <div *ngFor="let item of lineItems; trackBy: trackId; let i = index;">
            <input
                    type="number"
                    class="form-control form-control-lg form-control-solid"
            />
        </div>
    </div>

I don't get what is your question. Do you have an error with the code you have, are searching for something better, etc..? Please provide more information — Diogo Brito
– Diogo Brito, Commented Oct 24, 2022 at 10:19

Luca Angrisani · Accepted Answer · 2022-10-26 17:39:18Z

2

What are you searching for is:

this.formGroup = this.builder.group({
    lineItems: this.builder.array(
        this.data.lineItems.map(line => {
            return this.builder.group({item: [line.item, Validators.required]}
        })
    )
});

In that way, you have a formGroup inside of formArray

edited Oct 26, 2022 at 17:39

answered Oct 24, 2022 at 10:34

Luca Angrisani

3896 silver badges15 bronze badges

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

Collectives™ on Stack Overflow

Map angular formarray with model

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