How to show different error messages to different http errors in the angular2?

Question

I've added the code below. Basically I want to show error messages to different scenarios(HTTP status codes are returned). I'm trying to grasp all these concepts about observables etc but so far I've not reached anywhere. Hope someone could help me on this.

export class HomePage {

  private formData: FormGroup;
  public errors: string = "";

  constructor(
    public navCtrl: NavController,
    public authService: AuthServiceProvider,
    public formBuilder: FormBuilder                                                                                                                                                                                 
    ) {

    this.formData = this.formBuilder.group({
      email: ['', Validators.compose([Validators.required,Validators.email])],
      password: ['', Validators.required],
    });


    doRegister(){
      this.authService.register(this.formData.value)
      //Coming from angular 1 and I've honestly have no idea what I'm doing from here
      .toPromise()
      .then(data => this.navCtrl.push(ProfiePage,data))
      .catch((error: any) => {
          /*

          I want to show different msgs for different http erros
          example 
          for 500 "username already exists"
          for 400 " Invalid username"
          for 401 "Someother error"
          How do I do this?

          */
          this.errors = "Username already exists";
      });

    }


  }

}

@Injectable()
export class AuthServiceProvider {


  register(userData): Observable<UserModel[]>{
      // http error 500 will be return if there is an email exists error
      return this.http.post(this.config.apiUrl+this.config.user.register,JSON.stringify(userData))
        .map((res: Response) => res.json());

  }



}





<ion-content padding id="page2">

/* I want to show the errors here */
{{error}}

  <form [formGroup]="formData" (ngSubmit)="register()">
    <ion-list id="signup-list1">
      <ion-item id="signup-input5">
        <ion-label>
          Email
        </ion-label>
        <ion-input type="email" placeholder="" formControlName="email"></ion-input>
      </ion-item>
      <ion-item id="signup-input6">
        <ion-label>
          Password
        </ion-label>
        <ion-input type="text" placeholder="" formControlName="password"></ion-input>
      </ion-item>
    </ion-list>
    <button [disabled]="!formData.valid" ion-button color="positive" block>
      Sign up
    </button>
  </form>


</ion-content>

Sathyajith · Accepted Answer · 2017-06-19 05:42:33Z

1

In the error object in the catch block there will be a status property so you can access the http error code as error.status. By checking this error.status value using if conditions you can handle your scenario. But looking at your code it seems you are creating validation messages from the error code. I think it would be better to return validation messages from server (if you can edit the API) rather than manipulating it in the code. So if you want to change the validation message in future you can do it without any client code changes.

answered Jun 19, 2017 at 5:42

Sathyajith

4,0843 gold badges18 silver badges28 bronze badges

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

Comments

Ketan Akbari · Accepted Answer · 2017-06-19 05:21:47Z

0

You can throw error from service, and get in component

register(userData): Observable<UserModel[]>{
  return this.http.post(this.config.apiUrl+this.config.user.register,
         JSON.stringify(userData))
        .map((res: Response) => res.json())
        .catch(
        (error: Response) => {
            return Observable.throw(error.json() as JsonResponse)
        });;
}

And in Component you can

test(): void {
    this.testService.register().subscribe(
        (data: UserModel[]) => {
            console.log(data);
        }, (error: JsonResponse) => {
            console.log(error);
        }
    )
}

answered Jun 19, 2017 at 5:21

Ketan Akbari

11.3k5 gold badges36 silver badges52 bronze badges

Collectives™ on Stack Overflow

How to show different error messages to different http errors in the angular2?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related