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