2
Answers

Http API call is not returning data firs time only, Angular.

Hrides Thakur

Hrides Thakur
5y
1k
1
Hello All
 
I created login form in angular on login button click it call web api login method issue is when i click first time it call api properly and status is ok but does not return any data but if i click login button again it work fine and return data. it does not work only on first click letter it start working for another clicks same button.
 
ts code:
  1. import { Component, OnInit } from '@angular/core';  
  2. import { Router, ActivatedRoute } from '@angular/router';  
  3. import { FormBuilder, FormGroup, Validators } from '@angular/forms';  
  4. import { IUser } from './user';  
  5. import {HttpClient, HttpHeaders} from '@angular/common/http';  
  6. import { LoginService } from './login.service'  
  7. @Component({  
  8. selector: 'app-login',  
  9. templateUrl: './login.component.html',  
  10. styleUrls: ['./main.css','./material-design-iconic-font.css','./material-design-iconic-font.min.css']  
  11. })  
  12. export class LoginComponent implements OnInit {  
  13. loginForm: FormGroup;  
  14. userid: string;  
  15. password: string;  
  16. loginmsg:string;  
  17. errorMessage: string;  
  18. public users: Object;  
  19. constructor(private route: ActivatedRoute,  
  20. private router: Router, private loginservice: LoginService, private formBuilder: FormBuilder)  
  21. {}  
  22. ngOnInit() {  
  23. this.loginForm = this.formBuilder.group({  
  24. userid: ['', Validators.required],  
  25. password: ['', Validators.required]  
  26. });  
  27. }  
  28. UserLogin() {  
  29. //this.loginservice.userLogin().subscribe(data => this.users = data,  
  30. this.loginservice.login().subscribe(data => this.users = data,  
  31. error => {  
  32. this.errorMessage = error;  
  33. window.alert(error.message);  
  34. } );  
  35. console.log('completed');  
  36. console.log(this.users);  
  37. }  
  38. }  
Service Code:
  1. login(): Observable<Object[]>  
  2. {  
  3. return this.http.get<Object[]>(this.url2);  
  4. }  
  5. Template code:  
  6. <div class="limiter">  
  7. <div class="container-login100" style="background-image: url('images/bg-01.jpg');">  
  8. <div class="wrap-login100">  
  9. <form class="login100-form validate-form" [formGroup]="loginForm" (ngSubmit)="UserLogin()">  
  10. <span class="login100-form-logo">  
  11. <i class="zmdi zmdi-landscape"></i>  
  12. </span>  
  13.   
  14. <span class="login100-form-title p-b-34 p-t-27">  
  15. Log in  
  16. </span>  
  17.   
  18. <div class="wrap-input100 validate-input" data-validate = "Enter username">  
  19. <input class="input100" type="text" formControlName="userid" placeholder="Username" [(ngModel)]="userid">  
  20. <span class="focus-input100" data-placeholder="?"></span>  
  21. <div *ngIf="submitted && f.userid.errors" class="invalid-feedback">  
  22. <div *ngIf="f.userid.errors.required">Username is required</div>  
  23. </div>  
  24. </div>  
  25.   
  26. <div class="wrap-input100 validate-input" data-validate="Enter password">  
  27. <input class="input100" type="password" formControlName="password" placeholder="Password" [(ngModel)]="password">  
  28. <span class="focus-input100" data-placeholder="?"></span>  
  29. </div>  
  30.   
  31. <div class="contact100-form-checkbox">  
  32. <input class="input-checkbox100" id="ckb1" type="checkbox" name="remember-me">  
  33. <label class="label-checkbox100" for="ckb1">  
  34. Remember me  
  35. </label>  
  36. </div>  
  37.   
  38. <div class="container-login100-form-btn">  
  39. <button class="login100-form-btn">  
  40. <h4> Loginh4>  
  41. button>  
  42. </div>  
  43.   
  44. <div class="text-center p-t-90">  
  45. {{errorMessage}}  
  46. </div>  
  47.   
  48. <div class="text-center p-t-90">  
  49. <a class="txt1" href="#">  
  50. Forgot Password?  
  51. </a>  
  52. </div>  
  53. </form>  
  54. </div>  
  55. </div>  
  56. </div>  
Result:
First click console log:
completed
undefined
after second click if click aganin then start showing data:
completed
Object (array of object)
Answers (2)
Next Recommended Forum