How can I retrieve the value of an array using ngForm in Angular 2?

Question

How can I retrieve the value of an array using ngForm in Angular 2?

One concrete example is a component I created that looks like this.

@Component({
    selector: 'home',
    template:
        `
        <form (ngSubmit)="onSubmit(f)" #f="ngForm">
            <input type="text" ngControl="people">
            <input type="text" ngControl="people">
            <input type="submit">
        </form>
    `
})
export class Home {
    onSubmit(f) {
        console.log(f.value);
    }
}

After entering "tom" and "bob" into each form field and clicking the "Submit" button, the console displays:

Object {people: "bob"}

However, my intended output would be:

Object {people: ["tom", "bob"]}

I wonder if it's possible to achieve an array value using ngForm?

typescript angular angular2-forms

Answer 1

Answer №1

In meeting my requirements, I have successfully utilized the ControlArray.

import {Component} from 'angular2/core';
import {FORM_DIRECTIVES, Control, FORM_PROVIDERS, FormBuilder} from 'angular2/common';

@Component({
        selector: 'home',
        template:
            `
            <form [ngFormModel]="sampleForm" (ngSubmit)="onSubmit(sampleForm)">
                <div ngControlGroup="people">
                    <div *ngFor="let item of sampleForm.controls.people.controls; let i = index">
                        <input type="text" ngControl='{{ i }}'>
                        <button (click)="delPerson(i)">Del</button>
                    </div>
                </div>
                <button (click)="addPerson($event)">Add</button>
                <input type="submit">
            </form>
        `,
        providers: [FORM_PROVIDERS]
    })
export class Home {

    sampleForm: any;

    constructor(private builder: FormBuilder) {
        this.sampleForm = this.builder.group({
            people: this.builder.array([new Control()])
        });
    }

    addPerson(event) {
        event.preventDefault();
        this.sampleForm.controls.people.push(new Control());
    }

    delPerson(i: number) {
        this.sampleForm.controls.people.removeAt(i);
    }

    onSubmit(f) {
        console.log(f.value);
    }
}

This solution has effectively met my needs. However, I find the syntax (

let item of sampleForm.controls.people.controls

) to be less elegant and I am uncertain about the appropriateness of using ngForm in this context.

Answer 2

In meeting my requirements, I have successfully utilized the ControlArray.

import {Component} from 'angular2/core';
import {FORM_DIRECTIVES, Control, FORM_PROVIDERS, FormBuilder} from 'angular2/common';

@Component({
        selector: 'home',
        template:
            `
            <form [ngFormModel]="sampleForm" (ngSubmit)="onSubmit(sampleForm)">
                <div ngControlGroup="people">
                    <div *ngFor="let item of sampleForm.controls.people.controls; let i = index">
                        <input type="text" ngControl='{{ i }}'>
                        <button (click)="delPerson(i)">Del</button>
                    </div>
                </div>
                <button (click)="addPerson($event)">Add</button>
                <input type="submit">
            </form>
        `,
        providers: [FORM_PROVIDERS]
    })
export class Home {

    sampleForm: any;

    constructor(private builder: FormBuilder) {
        this.sampleForm = this.builder.group({
            people: this.builder.array([new Control()])
        });
    }

    addPerson(event) {
        event.preventDefault();
        this.sampleForm.controls.people.push(new Control());
    }

    delPerson(i: number) {
        this.sampleForm.controls.people.removeAt(i);
    }

    onSubmit(f) {
        console.log(f.value);
    }
}

This solution has effectively met my needs. However, I find the syntax (

let item of sampleForm.controls.people.controls

) to be less elegant and I am uncertain about the appropriateness of using ngForm in this context.

Answer 3

Answer №2

To enhance your application, I propose creating a custom subcomponent that is compatible with ngModel and form controls for managing people:

const PEOPLE_VALUE_ACCESSOR = new Provider(
  NG_VALUE_ACCESSOR, {useExisting: forwardRef(() => PeopleComponent), multi: true});

@Component({
  selector: 'people',
  template: `
    <div>
      Person 1 : <input [(ngModel)]="person1" (ngModelChange)="doOnChange()"/><br/>
      Person 2 : <input [(ngModel)]="person2" (ngModelChange)="doOnChange()"/>
    <div>
  `,
  providers: [ PEOPLE_VALUE_ACCESSOR ]
})
export class PeopleComponent implements ControlValueAccessor {
  onChange = (_) => {};
  onTouched = () => {};

  writeValue(value:any):void {
    if (value!=null) {
      this.person1 = value[0];
      this.person2 = value[1];
    }
  }

  doOnChange(elt) {
    this.onChange([ this.person1, this.person2 ]);
  }

  registerOnChange(fn: (_: any) => void): void { this.onChange = fn; }
  registerOnTouched(fn: () => void): void { this.onTouched = fn; }
}

You can implement it as follows in your form:

<form>
  <div>
    <people #people="ngForm" ngControl="people"></people>
    people : {{people.value}}
  </div>
</form>

Upon using the associated control (people.value), you'll receive an array.

For a working example, refer to this Plunkr demo: https://plnkr.co/edit/ix8unZ58hvqojjAic0E3?p=preview.

Answer 4

To enhance your application, I propose creating a custom subcomponent that is compatible with ngModel and form controls for managing people:

const PEOPLE_VALUE_ACCESSOR = new Provider(
  NG_VALUE_ACCESSOR, {useExisting: forwardRef(() => PeopleComponent), multi: true});

@Component({
  selector: 'people',
  template: `
    <div>
      Person 1 : <input [(ngModel)]="person1" (ngModelChange)="doOnChange()"/><br/>
      Person 2 : <input [(ngModel)]="person2" (ngModelChange)="doOnChange()"/>
    <div>
  `,
  providers: [ PEOPLE_VALUE_ACCESSOR ]
})
export class PeopleComponent implements ControlValueAccessor {
  onChange = (_) => {};
  onTouched = () => {};

  writeValue(value:any):void {
    if (value!=null) {
      this.person1 = value[0];
      this.person2 = value[1];
    }
  }

  doOnChange(elt) {
    this.onChange([ this.person1, this.person2 ]);
  }

  registerOnChange(fn: (_: any) => void): void { this.onChange = fn; }
  registerOnTouched(fn: () => void): void { this.onTouched = fn; }
}

You can implement it as follows in your form:

<form>
  <div>
    <people #people="ngForm" ngControl="people"></people>
    people : {{people.value}}
  </div>
</form>

Upon using the associated control (people.value), you'll receive an array.

For a working example, refer to this Plunkr demo: https://plnkr.co/edit/ix8unZ58hvqojjAic0E3?p=preview.

How can I retrieve the value of an array using ngForm in Angular 2?

Answer №1

Answer №2

Similar questions

What could be the reason for the exclusion of 'null' from the return type of Document.getElementById in VS Code?

When using tsdx with React, null values can prevent proper usage of hooks

You are unable to elongate the interface 'http.IncomingMessage'. Were you intending to use 'implements' instead?

Having difficulty converting string columns/data to numerical values when exporting an Ag-Grid table to Excel with getDataAsExcel function

Setting up pagination in Angular Material can sometimes present challenges

Running pre-commit eslint autofix but encountering errors that do not exist

Wait for the nested request to finish before returning the Observable

Two components are loaded simultaneously by Angular

Excessive notification events are currently causing a blockage in the Angular app

Creating a dual-element display in React within a single frame

Encountering issues while trying to run npm install for an Angular 7 application, specifically receiving an error stating: "Module not found: @angular-devkit/build-ng-packagr." This error is hindering

What is the reason behind useEffect giving warnings for unnecessary fields that are not included in the dependencies array?

I am facing conflicts between vue-tsc and volar due to version discrepancies. How can I resolve this problem?

Ways to retrieve the identifier of a specific element within an array

What could be causing issues with my Angular and Express.js Server-Sent Events implementation?

Angular - The filter method cannot be used on Observables

What could be the reason for receiving an undefined user ID when trying to pass it through my URL?

Encountering a service call error during the execution of Angular 2 unit tests using Jasmine

Error in React: Trying to access property 'functionName' of an undefined object on click event

Angular HttpClient not recognizing hashtag