devise token auth api をAngular4 でUIを実装する3

※angularの完成物のBitbucketのリンクです
Angular4-devise-token-auth

関連記事
全て連続しているので上から順に進めていっていただけるとわかりやすいと思います
devise token auth を使って簡単に早くAPIを作る1( api作成 )
devise token auth を使って簡単に早くAPIを作る2 ( jsonの出力 )
devise token auth api をAngular4 でUIを実装する1 ( angularのセットアップ )
devise token auth api をAngular4 でUIを実装する2
devise token auth api をAngular4 でUIを実装する3 ( 新規登録 ) 今回はここ
devise token auth api をAngular4 でUIを実装する4 ( ログインしやすくする)

今回は新規登録を追加します

[toc]

新規登録のためのメソッドをauth.service.tsに追加する

新規登録ができるように、auth.service.tsにメソッドを追加します
追加後はこんなコードになります

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

// 必要なモジュールをインポート
import {Http, Headers, RequestOptions} from '@angular/http';
import 'rxjs/Rx';

@Injectable()
export class AuthService {

  // apiのurl
  url = 'http://localhost:3000';

  constructor(private http: Http) {
  }


  // 新規登録のためのメソッド
  signUp(body: any): Promise<any> {
    let headers = new Headers({'Content-Type': 'application/json'});
    let options = new RequestOptions(({headers: headers}));
    return this.http.post(this.url + '/api/auth', body, options).toPromise();
  }

  // 引数にはログイン時に必要となる、emailとpasswordを入れる予定
  // headerはjsonだと明記する
  logIn(body: any): Promise<any> {
    let headers = new Headers({'Content-Type': 'application/json'});
    let options = new RequestOptions({headers: headers});
    return this.http.post(this.url + '/api/auth/sign_in', body, options).toPromise();

  }
}


// オブジェクト作成のためのクラス
// 新規登録用
export class SignUp {
  constructor(public name?: string,
              public company?: string,
              public email?: string,
              public password?: string) {
  }
}

// ログイン時のオブジェクトを定義
export class Login {
  constructor(public email?: string,
              public password?: string,
              public password_confirmation?: string) {
 } 
}

sign-up.component.tsを作成する

$ ng g component sign-up
installing component
  create src/app/sign-up/sign-up.component.css
  create src/app/sign-up/sign-up.component.html
  create src/app/sign-up/sign-up.component.spec.ts
  create src/app/sign-up/sign-up.component.ts
  update src/app/app.module.ts

作成後はコードを以下のように修正してください

import {Component, OnInit} from '@angular/core';
import {AuthService, SignUp} from '../auth.service';


@Component({
  selector: 'app-sign-up',
  templateUrl: './sign-up.component.html',
  styleUrls: ['./sign-up.component.css']
})
export class SignUpComponent implements OnInit {

  sign_up = new SignUp();

  constructor(private authService: AuthService) {
  }


  ngOnInit() {
  }

  data() {
    let body = JSON.stringify({
      'name': this.sign_up.name,
      'company': this.sign_up.company,
      'email': this.sign_up.email,
      'password': this.sign_up.password,
      'password_confirmation': this.sign_up.password_confirmation
    });
    this.authService.signUp(body).then((response) => {
      console.log(response);
    });
  }

}

viewの修正

componentが終わったので、次はhtmlを変更していきます

<form (ngSubmit)="onSubmit()" #signUpForm="ngForm">


  <div class="row">
    <h2>登録</h2>
    <div class="col-md-3 input-lg">
      <label>お名前</label>
    </div>
    <div class="col-md-9">
      <input type="text" class="form-control input-lg" [(ngModel)]="sign_up.name" name="name">
    </div>
  </div>


  <div class="row">
    <div class="col-md-3 input-lg">
      <label>会社名</label>
    </div>
    <div class="col-md-9">
      <input type="text" class="form-control input-lg"
             [(ngModel)]="sign_up.company" name="company">
    </div>
  </div>


  <div class="row">
    <div class="col-md-3 input-lg">
      <label>メールアドレス</label>
    </div>
    <div class="col-md-9">
      <input type="text"
             class="form-control input-lg"
             [(ngModel)]="sign_up.email"
             name="email">
    </div>
  </div>


  <div class="row">
    <div class="col-md-3 input-lg">
      <label>パスワード</label>
    </div>
    <div class="col-md-9">
      <input type="password" class="form-control input-lg"
             [(ngModel)]="sign_up.password" name="password">
    </div>
  </div>


  <div class="row">
    <div class="col-md-3 input-lg">
      <label>パスワード確認用</label>
    </div>
    <div class="col-md-9">
      <input type="password" class="form-control input-lg" [(ngModel)]="sign_up.password_confirmation"
             name="password_confirmation">
    </div>
  </div>


  <div class="row contact-item">
    <div class="col-md-offset-3 col-md-9 input-lg">
      <button type="submit" class="btn btn-danger btn-lg" (click)="data()">新規登録</button>
    </div>
  </div>
</form>

app.component.htmlにセレクタを入れる

最後にセレクターを入れてやります
こうすることでAngularがsign-up.componentをここに呼び出すことができます

<div class="container-fluid">
  <div class="container">
    <app-login></app-login>
  </div>
  <div class="container">
    <app-sign-up></app-sign-up>
  </div>
</div>

登録してみる

いくつかエラーが出ていますが、無事に登録できて successしたと返ってきています！