editor.component: using the reactive forms api

src/app/editor/editor.component.html

@@ -5,30 +5,27 @@
 
         <list-errors [errors]="errors"></list-errors>
 
-        <form>
+        <form [formGroup]="articleForm">
           <fieldset [disabled]="isSubmitting">
 
             <fieldset class="form-group">
               <input class="form-control form-control-lg"
-                name="title"
-                [(ngModel)]="article.title"
+                formControlName="title"
                 type="text"
                 placeholder="Article Title" />
             </fieldset>
 
             <fieldset class="form-group">
               <input class="form-control"
-                name="description"
-                [(ngModel)]="article.description"
+                formControlName="description"
                 type="text"
                 placeholder="What's this article about?" />
             </fieldset>
 
             <fieldset class="form-group">
               <textarea class="form-control"
-                name="body"
+                formControlName="body"
                 rows="8"
-                [(ngModel)]="article.body"
                 placeholder="Write your article (in markdown)">
               </textarea>
             </fieldset>
@@ -37,9 +34,8 @@
               <input class="form-control"
                 type="text"
                 placeholder="Enter tags"
-                name="tag_field"
-                [(ngModel)]="tagField"
-                (keyup)="addTag($event)" />
+                [formControl]="tagField"
+                (keyup.enter)="addTag()" />
 
               <div class="tag-list">
                 <span *ngFor="let tag of article.tagList"

src/app/editor/editor.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, FormControl } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 
 import { Article, ArticlesService } from '../shared';
@@ -8,42 +9,62 @@ import { Article, ArticlesService } from '../shared';
   templateUrl: './editor.component.html'
 })
 export class EditorComponent implements OnInit {
-  constructor(
-    private articlesService: ArticlesService,
-    private route: ActivatedRoute,
-    private router: Router
-  ) {}
-
   article: Article = new Article();
+  articleForm: FormGroup;
+  tagField = new FormControl();
   errors: Object = {};
-  tagField: string;
   isSubmitting: boolean = false;
 
+  constructor(
+    private articlesService: ArticlesService,
+    private route: ActivatedRoute,
+    private router: Router,
+    private fb: FormBuilder
+  ) {
+    // use the FormBuilder to create a form group
+    this.articleForm = this.fb.group({
+      title: '',
+      description: '',
+      body: '',
+    });
+    // Optional: subscribe to value changes on the form
+    // this.articleForm.valueChanges.subscribe(value => this.updateArticle(value));
+  }
+
   ngOnInit() {
     // If there's an article prefetched, load it
     this.route.data.subscribe(
       (data: {article: Article}) => {
         if (data.article) {
           this.article = data.article;
+          this.articleForm.patchValue(data.article);
         }
       }
     );
   }
 
-  addTag(event) {
-    if (event.keyCode === 13) {
-      this.article.tagList.push(this.tagField);
-      this.tagField = '';
+  addTag() {
+    // retrieve tag control
+    let tag = this.tagField.value;
+    // only add tag if it does not exist yet
+    if (this.article.tagList.indexOf(tag) < 0) {
+      this.article.tagList.push(tag);
     }
+    // clear the input
+    this.tagField.reset('');
   }
 
-  removeTag(tagName) {
-    this.article.tagList = this.article.tagList.filter((slug) => slug != tagName);
+  removeTag(tagName: string) {
+    this.article.tagList = this.article.tagList.filter((tag) => tag !== tagName);
   }
 
   submitForm() {
     this.isSubmitting = true;
 
+    // update the model
+    this.updateArticle(this.articleForm.value);
+
+    // post the changes
     this.articlesService
     .save(this.article)
     .subscribe(
@@ -54,4 +75,8 @@ export class EditorComponent implements OnInit {
       }
     );
   }
+
+  updateArticle(values: Object) {
+    (<any>Object).assign(this.article, values);
+  }
 }