Sending an array of data using Angular in a web service

Question

Sending an array of data using Angular in a web service

Here is my model object from model.ts

 name_id: string[];  public generateUrlencodedParameters(token: string, id?: number): string {

        let urlSearchParams = new URLSearchParams();
        urlSearchParams.append('name_id', this.name_id.toString());

Now moving to component.ts

this.MyForm = new FormGroup({
      'name_id': this.fb.array([])
    });

  onAddItem() {
    (<FormArray>this.MyForm.controls['name_id']).push(new FormControl('', Validators.required));   }

Lastly, in the component.html file

 <div class="row">
    <div formArrayName="name_id">
      <div class="form-group" *ngFor="let name of MyForm.get('name_id').controls; let name_id = index">
        <br>
        <input class="form-control" formControlName="{{name_id}}">
      </div>
    </div>
    <div class="input-field col s4">
      <button type="button" class="btn btn-primary" (click)="onAddItem ()">+</button>
    </div>   </div>

I am facing an issue where when I post it to the webservice, it gets formatted as

name_id=FA163EBBBC1D%2C11E7FF6%2C11E7FF6FC1D

, separating the array with %2C. Can anyone help me with this problem?

arrays angular forms api typescript

Answer 1

Answer №1

Developing a well-structured form

  <div class="col">
    <form [formGroup]="MyForm" (ngSubmit)="onSubmit()">
    <div formArrayName="name_id" >
      <div class="form-group" *ngFor="let name of MyForm.get('name_id').controls; let name_id = index">
        <br>
        <input class="form-control" formControlName="{{name_id}}">
      </div>
    </div>
    <div class="input-field col s4">
      <button type="button" class="btn btn-primary" (click)="onAddItem ()">+</button>
    </div>
      <button class="btn primary-btn" type="submit">Submit </button>
    </form>
  </div>

Utilize console log for troubleshooting within your component We can access a reactive FormArray using this syntax

(<FormArray>this.MyForm.controls['name_id'])).at( <index>)

Alternatively, you can simplify it by retrieving its control and invoking methods of that controller

  onSubmit() {
    let nameIdCtrl = <FormArray>this.MyForm.controls['name_id']);
    console.log(nameIdCtrl.at(0).value);
  }

Ensure that the first input is displayed correctly when debugging

Answer 2

Developing a well-structured form

  <div class="col">
    <form [formGroup]="MyForm" (ngSubmit)="onSubmit()">
    <div formArrayName="name_id" >
      <div class="form-group" *ngFor="let name of MyForm.get('name_id').controls; let name_id = index">
        <br>
        <input class="form-control" formControlName="{{name_id}}">
      </div>
    </div>
    <div class="input-field col s4">
      <button type="button" class="btn btn-primary" (click)="onAddItem ()">+</button>
    </div>
      <button class="btn primary-btn" type="submit">Submit </button>
    </form>
  </div>

Utilize console log for troubleshooting within your component We can access a reactive FormArray using this syntax

(<FormArray>this.MyForm.controls['name_id'])).at( <index>)

Alternatively, you can simplify it by retrieving its control and invoking methods of that controller

  onSubmit() {
    let nameIdCtrl = <FormArray>this.MyForm.controls['name_id']);
    console.log(nameIdCtrl.at(0).value);
  }

Ensure that the first input is displayed correctly when debugging

Sending an array of data using Angular in a web service

Answer №1

Similar questions

Exploring the process of iterating over asynchronous data in Angular

Comparison between modules and standalone components

Lookup users either by their email or their unique primary key in the form of a UUID

Circular structure error occurred when attempting to convert an object to JSON, starting at an object constructed with the constructor 'Object'

How to Incorporate and Utilize Untyped Leaflet JavaScript Plugin with TypeScript 2 in Angular 2 Application

Submitting a form with Multer when the user chooses to upload a file or not

How can I configure nest.js to route all requests to index.html in an Angular application?

What is the best way to obtain user-inputted data from a dynamic input table with dynamically added rows?

Using React Material UI to create multiple collapse components

Problem with Angular 5: Data Binding Issue未知EncodingException

Transfer data from distinct arrays to separate variables

I'm having trouble getting any data to emit when I subscribe to a state service subject that stores a hovered element. What could I be missing?

PHP Arrays - the everlasting reference

I am continuously receiving the message "Alert: It is important for every child in a list to possess a distinct "key" prop." while working with the <option> list

Issue occurs where the system is unable to recognize a defined variable, despite it being clearly defined

Enhancing the Value of BehaviorSubject with Object Assign in Angular using Typescript and RxJs

Best method to incorporate JSON array from WebService into a Dataframe

getItemForm does not make a second promise call

Effectively managing intricate and nested JSON objects within Angular's API service

The ng-bootstrap ngb-accordion component in Angular2 is not visible on the screen