这是我的login.component.html
<form #user class="form-horizontal" method="post" (ngSubmit)="login($event)">
<label for="email" class="cols-sm-2 control-label">Your Email</label>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-envelope fa" aria-hidden="true"></i></span>
<input type="text" class="form-control" name="email" [(ngModel)]="user.email" placeholder="Enter your Email"/>
</div>
<label for="password" class="cols-sm-2 control-label">Password</label>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-lock fa-lg" aria-hidden="true"></i></span>
<input type="password" class="form-control" name="password" [(ngModel)]="user.password" placeholder="Enter your Password"/>
</div>
<div class="form-group ">
<button type="submit" class="btn btn-primary btn-lg btn-block login-button">Login</button>
</div>
</form>
这是我的Login.Component.TS导出类LoginComponent{
user = {email:'', password:''};
constructor (private dataservice: DataService){
}//End of constructor
//Login Function
login(){
console.log(this.user);
this.dataservice.loginValidate(this.user).subscribe(data => {
console.log(data);
},error => {
console.log(error);
}
);
}//end of function
}
这是我的data.service.ts。
@Injectable()
export class DataService {
constructor(private http: HttpClient){}
//Method to login validate
loginValidate(user) {
const post_data = this.http.post('http://localhost/charan/postdata.php',{
username: user.email,
password: user.password
}).subscribe(
res => {
console.log(res);
}
);
}
}
当我试图发布表单数据时，它显示以下错误:
错误类型错误:无法读取在logincomponent.push./src/app/login/login.component.ts.logincomponent.login.component.login.component.login.component.login.component.login.component.login.component.login.component.login.component.login.component.login.component.login.component.login.component.login.component.login.component.login.component.login.component.login
这是我的Package.json
{
“名称”:“exproj1”，“版本”:“0.0.0"，”脚本“:{”ng":“ng"，”start":“ng serve"，”build:“ng build"，”test":“ng test"，”lint:“ng lint"，”e2e:“ng e2e”，“private:true，”dependencies:{“@angular/animations”:“6.0.3”，“@angular/commonomy”:“6.0.3”，“@angular/compiler”:“6.0.3”，“@angular/coree”:“6.0.3”，“2.0.0"，“karma-jasmine:”1.1.1“，”karma-jasmine-html-reporter:“0.2.2”，“量角器”:“5.3.0”，“ts-node:”5.0.1“，”tslint:“5.9.1”}}
请帮我解决这个问题。
提前致谢
我可以展示一个代码示例。
login.component.html
<form class="pt-3" (submit)="onLogin()">
<div class="form-group">
<label>Email</label>
<input type="text" class="form-control" [(ngModel)]="email" name="email" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label>Password</label>
<input type="password" [(ngModel)]="password" name="password" class="form-control" placeholder="should have min. 6 character with a number">
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Keep Me logged in for 7 days</label>
</div>
<button type="submit" class="btn btn-primary mt-3">Login</button>
</form>
login.component.ts
export class LoginComponent implements OnInit {
email: String;
password : String;
onLogin(){
const user = {
email: this.email,
password: this.password
}
this.authService.authenticateUser(user).subscribe(data => {
if(data.success){
this.authService.storeUserData(data.token, data.user);
this.flashMessage.show('succefully loggedin !', {cssClass: 'alert-success', timeout: 5000});
this.router.navigate(['/user/dashboard']);
} else {
this.flashMessage.show(data.msg, {cssClass: 'alert-danger', timeout:2000});
this.router.navigate(['/auth/login']);
}
});
}
}
Auth.Service.ts
authenticateUser(user){
let headers = new Headers();
headers.append('Content-Type', 'application/json');
return this.http.post(this.url + `/users/authenticate`, user, {headers: headers})
.map(res => res.json())
}
希望这能帮到你。
从表单中删除用户引用或更改其名称。如果您在ts中使用这个实例，那么它就会有问题。
