0

I am just start learning angular2.0. I already uses the services in angular1.But I dont know how can I use services in angular2 Here is my component.html file:

<form [ngFormModel]="loginForm" (click)="doLogin($event)">
    <input ngControl="email" type="email" placeholder="Your email" required>
    <input ngControl="password" type="password" placeholder="Your password" required>
  <button type="submit">Log in</button>
</form>

This is my typescript File:

import {Component} from 'angular2/core';
import {FORM_DIRECTIVES,CORE_DIRECTIVES,FormBuilder, Validators,Control,ControlGroup } from 'angular2/common';
import { SampleService } from './sample.service';

@Component({
  selector: 'my-form',

  templateUrl: 'app/form.component.html'
  providers: [
    SampleService
  ]
})
export class FormComponent {
  //loginForm: ControlGroup;
  constructor(fb: FormBuilder) {
    this.loginForm = new ControlGroup({
      email: new Control("", Validators.required),
      password: new Control("", Validators.required)
    });
  }
  constructor(private _sampleService: SampleService){
    this._sampleService = _sampleService;
  }
  doLogin(event){
    this._sampleService.login()
     .subscribe(
        data => /*this.countries = data,
        error => this.error = "Region " + this.region + " is invalid."*/
        {
         this.countries = data;

        }
     );
    }

};

I have create the Sample service to get the data.

import { Hero } from './hero';
import { Injectable } from 'angular2/core';
import {Http} from 'angular2/http';
import 'rxjs/Rx';
import {AppSettings} from './appSettings';
@Injectable()
export class SampleService {

  constructor(http: Http){
    this.http = http;
  }

  login(data){
    return this.http.get(AppSettings.API_ENDPOINT+"oceania").map(res => res.json(), err => err);

  }
}

Error is:

 this._sampleService.login() is undefiend
1
  • Is it an error at compilation or at execution? Commented Apr 18, 2016 at 7:52

1 Answer 1

3

This class has two constructors, that is not supported. You need to merge them into one

export class FormComponent {
//loginForm: ControlGroup;
  constructor(fb: FormBuilder) {
  this.loginForm = new ControlGroup({
  email: new Control("", Validators.required),
  password: new Control("", Validators.required)
});
  }
  constructor(private _sampleService: SampleService){
    this._sampleService = _sampleService;
}
    doLogin(event){
         this._sampleService.login()
     .subscribe(
        data => /*this.countries = data,
        error => this.error = "Region " + this.region + " is invalid."*/
        {
         this.countries = data;

        }
     );
    }

}

like

export class FormComponent {
//loginForm: ControlGroup;
  constructor(fb: FormBuilder, private _sampleService: SampleService) {
    this.loginForm = new ControlGroup({
      email: new Control("", Validators.required),
      password: new Control("", Validators.required)
    });
  }

  doLogin(event) {
    this._sampleService.login()
    .subscribe(
        data => /*this.countries = data,
        error => this.error = "Region " + this.region + " is invalid."*/
        {
         this.countries = data;

        });
   }
}

also this is redundant and unnecessary

  constructor(private _sampleService: SampleService){
    this._sampleService = _sampleService;
  }

if you add private or public to a constructor parameter then an instance property is already declared and the value assigned to it

  constructor(private _sampleService: SampleService){
    // this._sampleService = _sampleService;
  }

The commented out line throws because there is no _sampleService variable, only this._sampleSrevice.

Sign up to request clarification or add additional context in comments.

2 Comments

@drewmore, actually I think it's "invalid" not "redundant" because there is no _sampleService and I think you'll get an error for accessing a variable that doesn't exist.
Got it. Thanks for clarification!

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.