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

https://i.sstatic.net/ejyxe.png

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

https://i.sstatic.net/ejyxe.png

Sending an array of data using Angular in a web service

Answer №1

Similar questions

Tailored validation for targeted field

Tips for successfully interacting with dynamic text areas using Protractor:

How do I rearrange the order of a collection in Firestore using a reference that I already have?

Updating an object within an array of objects in Angular

Experimenting with Date Object in Jest using Typescript and i18next

Angular 2 Login Component Featuring Customizable Templates

Combining PHP Arrays into a Single Array

jQuery AJAX returning an unexpected null value instead of JSON data

TypeScript implementation of internationalization message extraction in Create React App

Adding a custom role in Angular TypeScript in Microsoft AppInsights is a straightforward process that can provide valuable

What is the preferred build tool to use with Deno?

Unable to locate the reference for 'bootstrap'

Validating Emoji Inputs in Angular

Navigating through ionic2 with angularjs2 using for-each loops

How to retrieve values from multiple mat-sliders that are dynamically generated using ngFor loop

What is the best way to declare a classic C-Array directly in Objective-C?

A bash associative array designed to save every line beginning with the letter X

Mastering the art of effectively capturing and incorporating error data

Extracting a single character from an NSarray using Objective-C

Parsing PHP array using JavaScript