Form and List separated components

Question

I've an issue trying to get the model created after submitting the form, i'm not using any api, i'm trying to make an Anonymous "Twitter Like" locally without db or anything else. I'm using an array to store my "tweets" in TweetList.component.ts. I don't know how to sync my TweetList with the Form. I was thinking about EventEmitter but it seems not very adequate. I didn't figure how to rely my form and my tweetlist.

Both are called from an other component "tweets.component.ts" that is a "view" in my perspective.

tweetform.component.ts :

import { Component } from '@angular/core'; import { Tweet } from '../tweet/tweet.component'; @Component({ selector: 'tweetform' }) export class TweetFormComponent{ private auteur: string; private message: string; private model: Tweet; onSubmit(){ this.model = new Tweet(this.auteur, this.message); this.auteur = ""; this.message = ""; } }

tweetform.component.html :

<form (ngSubmit)="onSubmit()" #tweetform="ngForm"> <div class="form-group"> <label for="auteur">Auteur :</label> <input type="text" id="auteur" [(ngModel)]="tweetform.auteur" name="auteur" required> </div> <div class="form-group"> <label for="message">Message :</label> <input type="text" id="message" [(ngModel)]="tweetform.message" name="message" required> </div> <button type="submit" class="btn btn-success">Envoyer !</button> </form> <p> Auteur: {{ tweetform.model.getAuteur() }} / Message: {{ tweetform.model.getMessage() }}

tweetlist.component.ts :

import { Component } from '@angular/core'; import { Tweet } from "../tweet/tweet.component"; @Component({ selector: 'tweetlist', templateUrl: 'app/tweets/tweetlist.component.html' }) export class TweetListComponent{ private tweets: Tweet[]; constructor(){ this.tweets=[new Tweet('Jokoast','Salut tout le monde')]; } }

tweetlist.component.html :

<div class="pre-scrollable"> <div class="well-sm" *ngFor="let tweet of tweets"><span class="label label-success">{{ tweet.getAuteur() }}</span> {{ tweet.getMessage() }}</div> </div>

Now i have an issue about templates.

There is no directive with "exportAs" set to "ngForm"

All the help i find is about Angular 2 and importing Forms, but it doesn't work in Angular 4. Any idea ? (Maybe i should open a new topic and let one of you answering the main issue ?)

Example of the angular.io doc: import { FormsModule } from '@angular/forms'

Thank you for your help, one more time.

Jérémy.

You should make a separate tweets.service. This service will be responsible for getting and storing your data. It doesn't matter if you get it from an API or just an internal list. Have the service do all the data work and inject it into your components (don't forget to set it as provider in your component meta). Always use services to pass around data. — therebelcoder
– therebelcoder, Commented May 22, 2017 at 12:17
Okay, gonna look for more informations in the official doc. EDIT : Okay, i see. I inject the tweet.service into both component and i'll be able to add data from tweetform and get data from tweetlist. I gonna give it a try. Thank you. EDIT2 : Now, i've an issue about ngForm, i add it to the first post. All the help i find talk about importing Forms but it's not the same way to achieve it in Angular 4. — Jérémy JOKE
– Jérémy JOKE, Commented May 22, 2017 at 14:41

therebelcoder · Accepted Answer · 2017-05-22 16:20:33Z

You should make a separate tweets.service. This service will be responsible for getting and storing your data. It doesn't matter if you get it from an API or just an internal list.

Have the service do all the data work and inject it into your components (don't forget to set it as provider in your component meta). Always use services to pass around data.

Your component code:

import { TweetService } from './tweet.service'; @Component({ selector: 'my-app', templateUrl: './app.component.html', providers: [ TweetService ] }) export class AppComponent { // You can inject service like this in other components too constructor(private tweetService: TweetService) { // Do your stuff } }

If you will set-up another question for the forms problem and tag me, then I will have a look at that too.

Collectives™ on Stack Overflow

Form and List separated components

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related