Merge pull request gothinkster#5 from npx/forms-api

Forms api

src/app/article/article.component.html

@@ -98,8 +98,8 @@ <h1>{{ article.title }}</h1>
                 <textarea class="form-control"
                   placeholder="Write a comment..."
                   rows="3"
-                  name="body"
-                  [(ngModel)]="commentBody"></textarea>
+                  [formControl]="commentControl"
+                ></textarea>
               </div>
               <div class="card-footer">
                 <img [src]="currentUser.image" class="comment-author-img" />

src/app/article/article.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { FormControl } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 
 import {
@@ -15,27 +16,27 @@ import {
   templateUrl: './article.component.html'
 })
 export class ArticleComponent implements OnInit {
-  constructor(
-    private route: ActivatedRoute,
-    private articlesService: ArticlesService,
-    private commentsService: CommentsService,
-    private router: Router,
-    private userService: UserService
-  ) {}
-
   article: Article;
   currentUser: User;
   canModify: boolean;
   comments: Comment[];
-  commentBody = '';
+  commentControl = new FormControl();
   commentFormErrors = {};
   isSubmitting = false;
   isDeleting = false;
 
+  constructor(
+    private route: ActivatedRoute,
+    private articlesService: ArticlesService,
+    private commentsService: CommentsService,
+    private router: Router,
+    private userService: UserService,
+  ) { }
+
   ngOnInit() {
     // Retreive the prefetched article
     this.route.data.subscribe(
-      (data: {article: Article}) => {
+      (data: { article: Article }) => {
         this.article = data.article;
 
         // Load the comments on this article
@@ -71,44 +72,45 @@ export class ArticleComponent implements OnInit {
     this.isDeleting = true;
 
     this.articlesService.destroy(this.article.slug)
-    .subscribe(
-      success => {
-        this.router.navigateByUrl('/');
-      }
-    );
+      .subscribe(
+        success => {
+          this.router.navigateByUrl('/');
+        }
+      );
   }
 
   populateComments() {
     this.commentsService.getAll(this.article.slug)
-    .subscribe(comments => this.comments = comments);
+      .subscribe(comments => this.comments = comments);
   }
 
   addComment() {
     this.isSubmitting = true;
     this.commentFormErrors = {};
 
-     this.commentsService
-     .add(this.article.slug, this.commentBody)
-     .subscribe(
-       comment => {
-         this.comments.unshift(comment);
-         this.commentBody = '';
-         this.isSubmitting = false;
-       },
-       errors => {
-         this.isSubmitting = false;
-         this.commentFormErrors = errors;
-       }
-     )
+    let commentBody = this.commentControl.value;
+    this.commentsService
+      .add(this.article.slug, commentBody)
+      .subscribe(
+        comment => {
+          this.comments.unshift(comment);
+          this.commentControl.reset('');
+          this.isSubmitting = false;
+        },
+        errors => {
+          this.isSubmitting = false;
+          this.commentFormErrors = errors;
+        }
+      );
   }
 
   onDeleteComment(comment) {
     this.commentsService.destroy(comment.id, this.article.slug)
-    .subscribe(
-      success => {
-        this.comments = this.comments.filter((item) => item != comment);
-      }
-    );
+      .subscribe(
+        success => {
+          this.comments = this.comments.filter((item) => item !== comment);
+        }
+      );
   }
 
 }

src/app/auth/auth.component.html

@@ -9,29 +9,26 @@ <h1 class="text-xs-center">{{ title }}</h1>
           <a [routerLink]="['/register']" *ngIf="authType == 'login'">Need an account?</a>
         </p>
         <list-errors [errors]="errors"></list-errors>
-        <form (ngSubmit)="submitForm()">
+        <form [formGroup]="authForm" (ngSubmit)="submitForm()">
           <fieldset [disabled]="isSubmitting">
             <fieldset class="form-group">
               <input
-                name="username"
-                [(ngModel)]="credentials.username"
+                formControlName="username"
                 placeholder="Username"
                 class="form-control form-control-lg"
                 type="text"
                 *ngIf="authType == 'register'" />
             </fieldset>
             <fieldset class="form-group">
               <input
-                name="email"
-                [(ngModel)]="credentials.email"
+                formControlName="email"
                 placeholder="Email"
                 class="form-control form-control-lg"
                 type="text" />
             </fieldset>
             <fieldset class="form-group">
               <input
-                name="password"
-                [(ngModel)]="credentials.password"
+                formControlName="password"
                 placeholder="Password"
                 class="form-control form-control-lg"
                 type="password" />

src/app/auth/auth.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 { Errors, UserService } from '../shared';
@@ -8,33 +9,45 @@ import { Errors, UserService } from '../shared';
   templateUrl: './auth.component.html'
 })
 export class AuthComponent implements OnInit {
-  constructor(
-    private route: ActivatedRoute,
-    private router: Router,
-    private userService: UserService
-  ) {}
-
   authType: String = '';
   title: String = '';
   errors: Errors = new Errors();
-  credentials: Object = {};
   isSubmitting: boolean = false;
+  authForm: FormGroup;
+
+  constructor(
+    private route: ActivatedRoute,
+    private router: Router,
+    private userService: UserService,
+    private fb: FormBuilder
+  ) {
+    // use FormBuilder to create a form group
+    this.authForm = this.fb.group({
+      'email': '',
+      'password': ''
+    });
+  }
 
   ngOnInit() {
     this.route.url.subscribe(data => {
       // Get the last piece of the URL (it's either 'login' or 'register')
-      this.authType = data[data.length-1].path;
+      this.authType = data[data.length - 1].path;
       // Set a title for the page accordingly
       this.title = (this.authType === 'login') ? 'Sign in' : 'Sign up';
+      // add form control for username if this is the register page
+      if (this.authType === 'register') {
+        this.authForm.addControl('username', new FormControl());
+      }
     });
   }
 
   submitForm() {
     this.isSubmitting = true;
     this.errors = new Errors();
 
+    let credentials = this.authForm.value;
     this.userService
-    .attemptAuth(this.authType, this.credentials)
+    .attemptAuth(this.authType, credentials)
     .subscribe(
       data => this.router.navigateByUrl('/'),
       err => {

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);
+  }
 }