CODEWITHSUNDEEP
angularangular2-forms
Haseoh
Haseoh

Reputation: 930

Angular2 how to change url using form

I'm having some issues with my app. I wanted to implement a new functionality - add a form, where you input username and password and then send it to change url. My app takes JSONS from url and JSON content depends on the username and password. The pattern is: somewebsite.com/username/password.

Component

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

Service

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

Template

<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>

I have no idea how to implement that functionality. When I edited onSubmit method and added: console.log(username); it returned 'undefined' no matter if I filled the inputs or not.

Upvotes: 0

Views: 1508

Answers (1)

Santanu Biswas
Santanu Biswas

Reputation: 4787

Modify the OnSubmit() function in the Component to get username/password from the formGroup value:

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

Modify the getVehicle() method in Service to use username & password for generating dynamic URL:

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

With the above changes, your new feature should start working.

Hope this helps.

Upvotes: 1

Related Questions