On Sunday, October 9, 2016 at 4:55:15 PM UTC-4, Dawg wrote:
>
> hello,
>
> I'm trying to pull in data from PHP file (mock data) and all I'm getting
> is *undefined *data and not getting any error messages.
>
> mock data:
> <?php
> header("Access-Control-Allow-Origin: *");
> $data = array(
> array('userID' => '1', 'userName' => 'user1', 'password' => 'pass1'),
> array('userID' => '2', 'userName' => 'user2', 'password' => 'pass2'),
> array('userID' => '3', 'userName' => 'user3', 'password' => 'pass3'),
> array('userID' => '4', 'userName' => 'user4', 'password' => 'pass4'),
> array('userID' => '5', 'userName' => 'user5', 'password' => 'pass5')
> );
>
> echo json_encode($data);
> ?>
>
>
> *user-login.component.ts*
>
> import { Component, OnInit } from '@angular/core';
> import { Router } from '@angular/router';
> import { FormGroup, FormControl, Validators, FormBuilder } from
> '@angular/forms';
> import { DashboardComponent } from '../dashboard/dashboard.component';
> import { UserType } from '../services/usertype';
> import { LoginUserService } from '../services/login-user.service';
>
> @Component({
> selector: 'user-login',
> templateUrl: 'app/authentication/user-login.component.html',
> styles: ['.ng-touched .ng-invalid { border: 1px solid red;} '],
> providers: [ LoginUserService ]
> })
>
> export class UserLoginComponent implements OnInit {
> userLoginTitle = 'Authentication';
>
> userList: UserType[];
> myForm: FormGroup;
> passVariable: number = 4;
>
> constructor(private _fb: FormBuilder, private router: Router, private
> getUserListh: LoginUserService){ }
>
> ngOnInit(){
> this.myForm = this._fb.group({
> userName: ['', Validators.required],
> password: ['', [Validators.required, Validators.minLength(3)]]
> })
> }
>
> onSubmitLogin(){
> // console.log();
> let link = ['/dashboard', this.passVariable];
> this.router.navigate(link);
> this.getUserListMethod();
> }
>
> getUserListMethod(): void{
> this.getUserListh.getUserMethod().then(mylist => this.userList = mylist);
> console.log(this.userList);
> }
>
> }
>
>
> *template:*
> <div class="container">
>
> <div class="row">
> <div class="col-xs-6 col-sm-4">
> Touched: {{myForm.controls.userName.touched}}<br>
> Errors: {{myForm.controls.userName.errors | json}}<br>
> Valid: {{myForm.controls.userName.valid}}<br>
> Dirty: {{myForm.controls.userName.dirty}}<br>
> Untouched: {{myForm.controls.userName.untouched}}<br>
> Pristine: {{myForm.controls.userName.pristine}}<br>
> </div>
> <div class="col-xs-6 col-sm-4">
> <!-- ************ Login controls ************* -->
> <form [formGroup]="myForm"
> (ngSubmit)="onSubmitLogin(myForm)" >
> <div class="form-group">
> <label for="userName">Email address</label>
> <input type="text"
> class="form-control"
> id="userName"
> placeholder="userName"
> formControlName="userName">
> <span *ngIf="myForm.controls.userName.touched &&
> myForm.controls.userName?.errors?.required" >Field cannot be Empty</span>
> </div>
> <div class="form-group">
> <label for="password">Password</label>
> <input type="password"
> class="form-control"
> id="password"
> placeholder="Password"
> formControlName="password">
> <span
> *ngIf="myForm.controls.userName?.errors?.minlength?.requiredLength">
> required minlength </span>
> </div>
>
> <button type="submit" class="btn btn-default"
> >Submit</button>
> </form>
> <!-- ************ END: Login controls ************* -->
>
> </div>
> <!-- Optional: clear the XS cols if their content doesn't
> match in height -->
> <div class="clearfix visible-xs-block"></div>
> <div class="col-xs-6 col-sm-4">
> information1: <br>
> <pre>{{ myForm.value | json }}</pre>
> <br><br>
> <pre>{{ this.userList | json }}</pre>
> <br><br>
> User list:
> <div *ngFor="let user of this.userList">
> {{user.userName}}
> </div>
> </div>
> </div>
>
> </div>
>
>
>
> Login-user.service.ts
>
> import { Injectable } from '@angular/core';
> import { UserType } from './usertype';
> import { userDatabase } from './userdatabase';
>
> import { Headers, Http, Response, RequestOptions } from '@angular/http';
> import { Observable } from 'rxjs/Observable';
> import 'rxjs/add/operator/toPromise';
>
> @Injectable()
> export class LoginUserService{
> private userUrl = 'http://test.dev/app/inc/dataset.php';
>
> constructor(private http: Http){}
>
> getUserMethod(): Promise<UserType[]>{
> return this.http
> .get(this.userUrl)
> .toPromise()
> .then(response => response.json().data as UserType[])
> .catch(this.handleError);
> }//getUserMethod
>
> private handleError(error: any): Promise<any> {
> console.error('An error occurred', error); // for demo
> purposes only
> return Promise.reject(error.message || error);
> }
> }
>
> Update to the data folow
>
chrom->inspect -> network tab->preview seem to have the data im looking
for. the problem must me with my code and not the script thats making the
connection.. I'm missing a conversion of somesort somewhere..
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
