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.

Answer 1

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.