Angular2フォームを使用してURLを変更する方法

Question

私のアプリにいくつか問題があります。私は新しい機能を実装したいと思っていました。ユーザー名とパスワードを入力してURLを変更するために送信するフォームを追加しました。私のアプリはJSONSをURLから受け取り、JSONのコンテンツはユーザー名とパスワードに依存します。パターンはsomewebsite.com/username/passwordです。

コンポーネント

import { Component, enableProdMode, OnInit } from '@angular/core'; 
import { FormGroup, FormControl, Validators } from '@angular/forms'; 

import { VehicleService } from './vehicle.service'; 
import { User } from './user'; 

enableProdMode(); 

@Component({ 
    selector: 'vehicle-json', 
    templateUrl: './vehicle.html', 
    providers: [VehicleService] 
}) 
export class VehicleComponent implements OnInit { 
    public vehicles: GeneralVehicle[]; 
    public user: FormGroup; 

    ngOnInit() { 
    this.user = new FormGroup({ 
     username: new FormControl('', Validators.required), 
     password: new FormControl('', Validators.required) 
    }); 
    } 

    constructor(private vehicleService: VehicleService) { 
    this.vehicleService.getVehicle().subscribe(vehicle => { 
     this.vehicles = vehicle; 
    }); 
    } 

    onSubmit({ username, password }: { username: User, password: User }) { 
    console.log("test"); 
    } 
} 

interface GeneralVehicle { 
    status: number; 
    dallases: Vehicle[]; 
} 

interface Vehicle { 
    vehicle_id: number; 
    dallassettings: string; 
    dallasupdated: string; 
    dallas_list: DallasList[]; 
} 

interface DallasList { 
    number: number; 
    auth: number; 
} 

サービス

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

import { User } from './user'; 
import 'rxjs/add/operator/map'; 

@Injectable() 
export class VehicleService { 
    //used predefined username and password to check if my connection to the website is fine 
    private defusername = 'defaultUSERNAME' 
    private defpassword = 'defaultPASSWORD' 
    private url = 'mywebsite.com/' + this.defusername + '/' + this.defpassword; 

    constructor(private http: Http) { } 
    getVehicle() { 
     return this.http.get(this.url) 
      .map(res => res.json()); 
    } 
} 

テンプレート

<form novalidate (ngSubmit)="onSubmit(user)" [formGroup]="user"> 
    <label>Username: 
     <input formControlName="username" type="text" placeholder="Your username"> 
    </label> 
    <label>Password: 
     <input formControlName="password" type="password" placeholder="Your password"> 
    </label> 
    <button type="submit">Login</button> 
</form> 

<div *ngIf="vehicles"> 
    <b>Status: {{vehicles?.status}}</b> 
    <div *ngFor="let vehicle of vehicles.dallases"> 
     <ul> 
      <li>Vehicle ID: {{vehicle.vehicle_id}}</li> 
      <li>Dallas settings: {{vehicle.dallassettings}}</li> 
      <li>Dallas updated: {{vehicle.dallasupdated}}</li> 
      <li>Dallas list:</li> 
      <div *ngFor="let d of vehicle.dallas_list"> 
       <ul> 
        <li>Number: {{d.number}}</li> 
        <li>Auth: {{d.auth}}</li> 
       </ul> 
      </div> 
     </ul> 
    </div> 
</div> 

私はイムする方法見当がつかないその機能を実装します。 onSubmitメソッドを編集して追加したとき：console.log(username);入力が満たされているかどうかに関係なく、 'undefined'が返されました。

Answer 1

formGroup値からusername/passwordを取得するコンポーネントにOnSubmit()関数を変更：

onSubmit(user) { 

    // console.log(user.value.username); // <-- To test username 
    // console.log(user.value.password); // <-- To test password 

    this.vehicleService 
     .getVehicle(user.value.username, user.value.password) 
     .subscribe(vehicles => { 

     this.vehicles = vehicles; 
    }); 
} 

動的URLを生成するためusername & passwordを使用するサービスでgetVehicle()方法を変更します

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

import { User } from './user'; 
import 'rxjs/add/operator/map'; 

@Injectable() 
export class VehicleService { 
    //used predefined username and password to check if my connection to the website is fine 
    private defUsername = 'defaultUSERNAME' 
    private defPassword = 'defaultPASSWORD' 
    private defUrl = 'mywebsite.com/' + this.defusername + '/' + this.defpassword; 

    constructor(private http: Http) { } 

    getVehicle(username?: string, password?: string) { 

     const url = (!username || !password) ? defUrl : 'mywebsite.com/' + username + '/' + password; 

     return this.http.get(url) 
      .map(res => res.json()); 
    } 
} 

上記の変更により、あなたの新しい機能作業を開始する必要があります。

これが役に立ちます。