angular 5 set value to nested form group form array

Question

my product object that contain a array is ready in client side like this:

 public product =>>    require: [{ id: 397, product_id: 51, item: "asdasdd" },{ id: 398, product_id: 51, item: "bbbbbb" }]

for edit existing data porpose i want add item to my form input when form initialize.(i shoud make input for each item)

how can append my item to that ... i wrote a for loop to add item to form that you can see below but it not work

this is my form :

  public product;
  public requirementForm: FormGroup;

  constructor(private _store: StoreService, private fb: FormBuilder) {
    this.createForm();

  }

  createForm() {
    this.requirementForm = this.fb.group({
      itemRows: this.fb.array([])
    });
    this.requirementForm.setControl('itemRows', this.fb.array([]));
  }

  ngOnInit() {

    this.requirementForm.setControl('itemRows', this.fb.array([]));
    this.requirementForm = this.fb.group({
      itemRows: this.fb.array([this.initItemRows()])
    });


    this._store.ownersingleView(this.pid).subscribe((data: any) => {
      this.product = data;

      **for (let i = 0; i < data.require.length; i++) {
        const control = this.requirementForm.controls['itemRows'];
        control.push(this.initItemRows());
        this.requirementForm.controls['itemRows'].controls['itemname'].setValue(this.product.require[i].item, {onlySelf: true});
      }**

    })

  }

  initItemRows() {
    return this.fb.group({
      itemname: ['']
    });
  }

  addNewRow() {
    const control = this.requirementForm.controls['itemRows'];
    control.push(this.initItemRows());
  }

html form:


  
    
      
        
          
            
              
                نیازمندی #{{ i + 1 }}
                
                  نام آیتم

Lia · Accepted Answer

i open a stackblitz you can try something like this:

product.component.ts:

import { Component, Input} from '@angular/core';
import {FormGroup} from "@angular/forms";


@Component({
  selector: 'product',
  templateUrl: './product.component.html'
})
export class ProductComponent {
  @Input('group')
  public productForm: FormGroup;
}

product.component.html:


  
    id
    
    
      id is required
    
  
  
    productId
    
  
  
    item

app.component.ts:

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


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {

  public myForm: FormGroup;

  constructor(private _fb: FormBuilder) { }

  ngOnInit() {
    this.myForm = this._fb.group({
      name: ['', [Validators.required, Validators.minLength(5)]],
      products: this._fb.array([])
    });

    this.addProduct();
  }

  initProduct() {
    return this._fb.group({
      id: ['', Validators.required],
      productId: [''],
      item: ['']
    });
  }

  addProduct() {
    const control = this.myForm.controls['products'];
    const productCtrl = this.initProduct();
    control.push(productCtrl);
  }

  removeProduct(i: number) {
    const control = this.myForm.controls['products'];
    control.removeAt(i);
  }

  save(model: Product) {
    console.log(model);
  }
}

export interface Products {
  name: string;
  products: Product[];
}

export interface Product {
  id: string;
  productIid: string;
  item:string;
}

app.component.html:


  
    
      
        Add Product
      
      
        
          Name
          
          
            Name is required (minimum 5 characters).
          
        

        
          
            
              Product {{i + 1}}
              remove
            
            
              
            
          
        

        
          
            Add another product +
          
        

        
          
        
        

        
          myForm details:-
          Is myForm valid?: 
{{myForm.valid | json}}
          form value: 
{{myForm.value | json}}

and finally app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { ProductComponent} from "./product.component";
import { ReactiveFormsModule , FormsModule } from "@angular/forms";


@NgModule({
  declarations: [
    AppComponent,
    ProductComponent,

  ],
  imports: [
    BrowserModule,
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

hope this helps.

angular 5 set value to nested form group form array

Answers (1)

Related Questions