How do you submit a new object to an array via multiple inputs angular2

Question

Hoping for some help on a more complex example that expands on the examples in angular's Tour of Heroes

Rather than submitting a single string each time, how would you submit multiple values like in the following example e.g.:

          export class LittleTourComponent {
               heroes = [ {
                            'name':'Hulk',
                            'power':'strength'
                        },{
                            'name':'Bulk',
                            'power':'appetite'
                        }];

I presume a new 'entry' made up of the submitted values should be pushed to the heroes array something like this:

addHero(newHero) {
        if (newHero) {

          var entry = {
            'name': newHero.name, 
            'power': newHero.power
            };

          this.heroes.push(entry);
        }
    }

But what would be required in the template? Would you still use keyup.enter in this case?:

template:

<label>name</label
// how should the inputs be filled out in this scenario?
<input >
<label>power</label>
<input >

<button (click)=addHero(newHero)>Add</button>

 <ul *ngFor="let hero of heroes">
  <li>name:{{hero.name}}</li>
  <li>power:{{hero.power}}</li>
</ul>

example also on plnkr

Any help appreciated. thanks!

martxalen · Accepted Answer · 2020-01-08 11:13:40Z

2

Try and do this in your ts file:

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

class Hero {
    name: string;
    power: string;
}
export class LittleTourComponent {

    newHero: Hero;

    constructor() {
        this.newHero = new Hero();
    }

    heroes = [{
        'name': 'Hulk',
        'power': 'strength'
    }, {
            'name': 'Bulk',
            'power': 'appetite'
        }];

    addHero() {
        if (this.newHero) {

            var entry = {
                'name': this.newHero.name,
                'power': this.newHero.power
            };

            this.heroes.push(entry);
        }
    }
}

...and this in your html

<label>name</label>
<input [(ngModel)]="newHero.name">
<label >power</label>
<input [(ngModel)]="newHero.power">

<button (click)=addHero()>Add</button>

<ul *ngFor="let hero of heroes">
    <li>name:{{hero.name}}</li>
    <li>power:{{hero.power}}</li>
</ul>

edited Jan 8, 2020 at 11:13

martxalen

535 bronze badges

answered Sep 1, 2016 at 4:10

Tomas Schier

4075 silver badges17 bronze badges

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

3 Comments

fivedoor Over a year ago

Thanks very much Hammerschlag. I had thought that like in the original little tour example the addHero function would require an argument that would pass the input values to the array. I created new plunk based on your feedback. added the class declaration for hero and each variable is now referenced in the two way binding on the input but unfortunately still can't seem to get the solution to work.

Tomas Schier Over a year ago

Can you elaborate on what the problem is now? The solution above should work as I tried it out and it worked OK.

fivedoor Over a year ago

I figured out the issue I was having. I just needed to move the Hero class to be declared after the LittleTourComponent. I believe that’s because decorators work on the objects that come right after them as highlighted in this post. So I have accepted your answer now (with the added note that I believe the ordering of the class decoration relative to the decorators should be taken into account. Thanks again for your help Hammerschlag.

Mark Acosta · Accepted Answer · 2016-09-01 18:27:08Z

1

your click listener is calling what it thinks is a reference to an element in the DOM which u havent defined nor would take paramaters. Trying putting quotes around that callback

<label>name</label
    // how should the inputs be filled out in this scenario?
    <input >
    <label>power</label>
    <input >
    <button (click)="addHero(newHero)">Add</button>

     <ul *ngFor="let hero of heroes">
      <li>name:{{hero.name}}</li>
      <li>power:{{hero.power}}</li>
    </ul>

after further review, i notice ur referencing newHero in the little-tour component which does not exist in that components scope. Also, uve bound correctly to your inputs but i dont believe .value is the correct property to return the input... try

 [(ngModel)]="input1"

in your class declaration ad

input1: String;

and then using that variable.

I didnt notice until right now that you arent importing your directive

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

@Component({
  selector: 'my-app',
  templateUrl: 'app/app.component.html'
})
export class AppComponent { }

since u are calling

<little-tour></little-tour>

in your app.component.html then this should be your app component

import { Component }           from '@angular/core';
import {LittleTourComponent} from 'path-to-little-tour'

@Component({
  selector: 'my-app',
  templateUrl: 'app/app.component.html',
  directives: [LittleTourComponent]
})
export class AppComponent { }

edited Sep 1, 2016 at 18:27

answered Sep 1, 2016 at 3:31

Mark Acosta

3301 silver badge6 bronze badges

3 Comments

fivedoor Over a year ago

thanks mark. I updated the plunk with the revised click listener and added the newHero constructor based on Hammerschlag’s feedback so I think newHero should now exist in the components scope. Using name/power now rather than .value. Do the quotes around a callback mean it’s no longer looking to reference a DOM element? thanks.

Mark Acosta Over a year ago

so about the callbacks. In angular2 if you are referencing something outside of quotation marks inline, it assumes that you have bound that name to a DOM element. such as <input #boundname type="text"> . By adding quotation marks u are now representing javascript from ur handler. You can use instantiated component scope variables or a function call. if you want to use a string, you must use single quotes inside of double quotes but its a common confusion to be clear, at no point should u have this code (click)=anything without quotes

Mark Acosta Over a year ago

OH, i see a much larger problem though. You are calling <little-tour></little-tour> but your app component has no clue what that is until you import it.

Collectives™ on Stack Overflow

How do you submit a new object to an array via multiple inputs angular2

2 Answers 2

3 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related