Link JSON object array to a form by utilizing ngModel in Angular2

Question

Link JSON object array to a form by utilizing ngModel in Angular2

My current challenge involves creating a form for a "question" object, which consists of an array of strings for answers. I am struggling to bind these answers to the question model.

An initial implementation might look like this:

import { Component  } from '@angular/core';
class Question {
  question: string;
  answers: Array<string>;
}

@Component({
  selector: 'app',
  template: `
<input type="text" [(ngModel)]="question.question">
<input type="text" *ngFor="let answer of question.answers" [(ngModel)]="answer">
`
})

export class AppComponent {
  question: Question = new Question;
  question.answers = new Array(4);
  constructor(){};
}

The issue arises with the second ngModel. This solution triggers the error:

zone.js:388 Unhandled Promise rejection: Cannot assign to a reference or variable! ; Zone: <root> ; Task: Promise.then ; Value: Error: Cannot assign to a reference or variable!

It appears that binding a generated value from an ngFor loop to a model is not possible.

I have also experimented with other options:

```
[(ngModel)]="question.answers[index]"
```
-> Here, I used let index=index; within ngFor and assigned a name to the input. However, this resulted in the same error mentioned in the following paragraph
[(ngModel)]="question.answers[] -> Attempting a similar approach as using pure HTML, but this method did not work at all

None of these attempts yielded the desired outcome. When changing a value in an input field, it seemed to refresh the ngFor loop. Additionally, when I tried to allow users to append or delete an answer, adding a new answer would erase the content of the first one.

angular typescript angular-ngmodel angular2-forms

Answer 1

Answer №1

If I were to suggest, you have a couple of choices:

1 Consider Using an Object Instead of an Array

You could go through the object using ngFor and a pipe as detailed in this Stack Overflow post on Iterating over TypeScript Dictionary in Angular 2

@Pipe({ name: 'values',  pure: false })
export class ValuesPipe implements PipeTransform {
  transform(value: any, args: any[] = null): any {
    return Object.keys(value).map(key => value[key]);
  }
}

<div *ngFor="#value of object | values"> </div>

2 Utilize a Separate Array for the ngFor Loop, similar to what's shown in this example on Plunker

import { Component } from '@angular/core';

export class Hero {
  id: number;
  name: string;
}

@Component({
  selector: 'my-app',
  template: `<h1>Hello {{name}}</h1>
  <div *ngFor="let count of dummyArr; let i=index">
     <input type="number" [(ngModel)]="data[i]">
  </div>
  `
})
export class AppComponent implements OnInit { 
  name = 'Angular';
  data:number[]=[];
  dummyArr:number[]=[];

  ngOnInit(){
    this.data.length=6;
    this.dummyArr.length=6;
  }
}

Answer 2

If I were to suggest, you have a couple of choices:

1 Consider Using an Object Instead of an Array

You could go through the object using ngFor and a pipe as detailed in this Stack Overflow post on Iterating over TypeScript Dictionary in Angular 2

@Pipe({ name: 'values',  pure: false })
export class ValuesPipe implements PipeTransform {
  transform(value: any, args: any[] = null): any {
    return Object.keys(value).map(key => value[key]);
  }
}

<div *ngFor="#value of object | values"> </div>

2 Utilize a Separate Array for the ngFor Loop, similar to what's shown in this example on Plunker

import { Component } from '@angular/core';

export class Hero {
  id: number;
  name: string;
}

@Component({
  selector: 'my-app',
  template: `<h1>Hello {{name}}</h1>
  <div *ngFor="let count of dummyArr; let i=index">
     <input type="number" [(ngModel)]="data[i]">
  </div>
  `
})
export class AppComponent implements OnInit { 
  name = 'Angular';
  data:number[]=[];
  dummyArr:number[]=[];

  ngOnInit(){
    this.data.length=6;
    this.dummyArr.length=6;
  }
}

Link JSON object array to a form by utilizing ngModel in Angular2

Answer №1

Similar questions

Combine a string and integer in JavaScript without using quotation marks between them

Refresh Angular component upon navigation

Using PostGraphile's NodeId identifiers for composite PrimaryKeys

How to send a value to a function in Angular from a different function?

Testing the receiveMessage function in SQS using Jest unit tests

Deploying an Angular application on Firebase is a great way to

What is the method to empty input fields after data has been submitted in an Angular application?

Is it possible to selectively exclude features such as routes and components from my Angular application during the build process based on the environment configuration file?

How can I display validation errors when submitting a form with ngx-materialize?

Encountering an issue when attempting to import a non-source module from a node library while running a Typescript script

Retrieve data from TypeScript file (.ts) and use it in an HTML document

Is it necessary to compile the ngfactory files during Angular 2 AOT compilation?

The import map is not being recognized by Supabase Edge Functions when passed in the command `npx supabase functions serve`

Leveraging the ReturnType from a method within a Child class that inherits from an abstract class

What is the process in TypeScript for defining a custom variation of a generic function?

Conceal the initial value in a dropdown menu in a React component

Incorporate Material Design Icons into your NPM Electron React application for sleek visuals

Sorting through an array of objects using a filter method

Jest encountered a syntax error due to an unexpected token <

Error Alert: Missing Provider for FormGroup!