how to push new form control to a nested form array(the parent form group is dynamic added i can't use getter on it)

Question

The problem is, because I can't hard code all the details of my formBuilder as I need dynamically add formGroup in its parrent formArray. And in this formGroup I need a child formArray which wrap up all the data that the user checked on the checkbox. but I failed push value in this child formArray. (in my work, the value of 'this.prodArray' is empty after I selected the element in the checkbox.) this is my code:`

productArrayForm = this.fb.group({
    arrayRoot: this.fb.array([this.prodGroup])
  })
  get arrayRoot(){
    return this.productArrayForm.get('arrayRoot') as FormArray;
  }
  get prodGroup(): FormGroup {
    return this.fb.group ({
      array:this.fb.array([])
    })
  }
  get prodArray() {
    return this.prodGroup.get('array') as FormArray;
  }
  addOption() {
    this.arrayRoot.push(this.prodGroup);
  }
  checkProd(product: string, isChecked: boolean) {
    if (isChecked){
      this.prodArray.push(new FormControl(product));
    }
  }

for html I wrote:

<form class='mb-2' [formGroup]='productArrayForm'>
    <div formArrayName="arrayRoot">
        <div *ngFor="let li of arrayRoot.controls; let j = index" [formGroupName]='j'>
            <div class="d-flex justify-content-end">
                <button (click)='addOption()'>+</button>
                <div class="form-group">
                <div class="form-control" *ngFor="let product of productsLocal;">
                    <input type="checkbox" (change)='checkProd(product.ProductId, $event.target.checked)'> {{product.ProductName}}
                </div>
            </div>
        </div>
    </div>
</form>`

productsLocal: public productsLocal = [ { ProductName: 'book1', ProductId: '1' }, { ProductName: 'book2', ProductId: '2' }, { ProductName: 'book3', ProductId: '3' }, { ProductName: 'book4', ProductId: '4' }, { ProductName: 'book5', ProductId: '5' }, ];

What is `productsLocal` and `productList` and `productListGroup`? Please provide a [mcve] — AT82, Apr 27 '19 at 14:15
Hi AJT_82, thank you for point out it! I edit my code again. I added productsLocal and changed the productlist and productlistGroup to the correct name. Cheers! — BarrickNL, Apr 28 '19 at 02:57
productList and productListGroup were in the addOption() method. now i changed their names — BarrickNL, Apr 28 '19 at 03:09

score 0 · Answer 1 · answered Apr 27 '19 at 11:15

I think you want to dynamic elements with form validation. It's possible in ngForm. ngForm full example click here

For Ex:

<form role="form" (ngSubmit)="f.form.valid && onSubmit()" #f="ngForm" novalidate>
    <div *ngFor="let item of allSaleItems; index as saleIndex">
        <select *ngIf="!item.batch" class="form-control font-12 p-l-0 p-r-0"
            [name]="'selectBatch' + saleIndex" [(ngModel)]="item.selectBatch" (change)="batchChange(item)"
            [ngClass]="{ 'is-invalid': f.submitted && !item.selectBatch }">
            <option value="" disabled>Product Batch Here</option>
            <option *ngFor="let pBatch of item.productBatches" [ngValue]="pBatch">{{pBatch.batch_details}}</option>
        </select>
        <div *ngIf="f.submitted && !item.selectBatch" class="invalid-feedback">
            Product batch is required
        </div>
    </div>
    <button type="submit">save</button>
</form>

how to push new form control to a nested form array(the parent form group is dynamic added i can't use getter on it)

1 Answers1