Using values from FormArray to hit POST Api in Angular 2

Question

I have a Formarray that takes input from User and forms a part of JSON that needs to be hit through an POST Api.

The JSON structure is as follows:

{
  "Name": "string",
  "Time": 0,
  "Values": [
    {
      "base": true,
      "order": 0,
      "query": "string",
      "Id": "string",
      "Path": "string",
      "Type": "string"
    },
    {
      "base": false,
      "order": 1,
      "query": "string",
      "Id": "string",
      "Path": "string",
      "Type": "string"
    }
  ]
}

Hence, I have defined a interface as follows:

pipeline-mapping.ts

import { PipelineConfigs } from './pipeline-configs';

export interface PipelineMapping {
    configName: String;
    queryTimeThresholdInMs: 0;
    sources: PipelineConfigs[];
}

pipeline-configs.ts

export interface PipelineConfigs {
    base: boolean;
    order: any;
    query: string;
    Id: string;
    Path: string;
    Type: string;
}

Now, I am taking the input of query, Id, Path and Type from an formarray as defined in my component file below.

component.ts

public pipelineMapping: PipelineMapping;
pipelineConfigs: PipelineConfigs[];

ngOnInit() {
    // initialize form here
    this.pipeLineForm = this._fb.group({
        pipelineConfigs: this.initPipeLineArray()
    });

    this.pipelineMapping = {
        configName: '',
        queryTimeThresholdInMs: 0,
        sources: // What goes here ? 
    };
}
initPipeLineArray() {
    let pipeArray = this._fb.array([]);
    pipeArray.push(this.initPipeline());
    pipeArray.push(this.initPipeline());
    return pipeArray;
}

initPipeline() {
    return this._fb.group({
       query: ['', Validators.required],
       Id: ['', Validators.required],
       Path: ['', Validators.required],
       Type: ['', Validators.required]
    });
}

Question 1: How do I assign FormArray type to type PipelineConfigs ?

Question 2: Also, I am not sure how do I capture value of Order which is not an input, rather is just displayed on UI. base gets the value true if order is 0 else false Here is the relevant parts of the HTML :

html

<input class="form-control" name="Name" [(ngModel)]="pipelineMapping.Name" type="text">
<div class="panel panel-default clearfix" [formGroup] = "pipeLineForm">
   <div class="row">
      <div formArrayName="pipelineConfigs">
         <div class="row" *ngFor="let pipes of pipeLineForm.controls.pipelineConfigs.controls; let i=index;">
            <div [formGroupName]="i">
               <select formControlName="Type">
                  <option disabled>Select Type</option>
                  <option value="Type 1">Type 1</option>
                  <option value="Type 2">Type 2</option>
                  <option value="Type 3">Type 3</option>
               </select>
               <input formControlName="Id" type="text">
               <input formControlName="Path" type="text">
               <textarea formControlName="query">{{query}}</textarea>
               <div class="col-xs-2 additional-details-actions">
                  <div class="col-xs-4">
                     <label class="label-text block">Order</label>
                     <label class="label-value block">{{i}}</label>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>

@PranayRana Last few lines in the HTML. I want it to come from there. Basically, passing the value of i will do. — AYa
– AYa, Commented Apr 4, 2018 at 6:51
@PranayRana Yes. I have edited. I had removed some parts of HTML and have kept only the relevant parts. — AYa
– AYa, Commented Apr 4, 2018 at 7:00
stackoverflow.com/questions/49596747/editing-a-form-in-angular ? — Eliseo
– Eliseo, Commented Apr 4, 2018 at 7:13

Pranay Rana · Accepted Answer · 2018-04-04 14:05:22Z

1

answer to questio 1 is like this you can do

    set initial value 

  ngOnChanges() {
    //get received data 
     this.setConfigs();
   }

   setConfigs(configs: PipelineConfigs[]) {
    const configFGs = configs.map(config=> this._fb.group(config));
    const configFormArray = this.fb.array(configFGs);
    this.pipeLineForm .setControl('pipelineConfigs', configFormArray );
  }

   //get values 
    const formModel = this.pipeLineForm.value;
    // deep copy of form model lairs
    const secretLairsDeepCopy: PipelineConfigs[] = formModel.pipelineConfigs.map(
      (config: PipelineConfigs) => Object.assign({}, config)
    );

html should be like

 <div formArrayName="pipelineConfigs">
            <div class="row" *ngFor="let pipes of pipelineConfigs.controls; let i=index;">
                <div [formGroupName]="i">

for second question answer is ,order value you can pass yourself like this

const count = 0;
initPipeline() {
    count++;
    return this._fb.group({
       query: ['', Validators.required],
       Id: ['', Validators.required],
       Path: ['', Validators.required],
       Type: ['', Validators.required],
       order:[count]
    });
}

Please read : https://angular.io/guide/reactive-forms#buttons if you are facing issue in understanding.

edited Apr 4, 2018 at 14:05

answered Apr 4, 2018 at 7:07

Pranay Rana

177k37 gold badges244 silver badges266 bronze badges

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

1 Comment

AYa Over a year ago

How are you using the setConfigs function ?

Collectives™ on Stack Overflow

Using values from FormArray to hit POST Api in Angular 2

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related