我需要在 Angular 7.3 中请求我的 API (https://myurl.com/login) 进行登录(用户名+密码)。当我在没有 user.models.ts 的情况下使用 POST 时,我收到了错误的请求错误。当我使用这个模型时,我遇到了这个错误:
“错误类型错误:无法设置未定义的属性“用户名”。”
用户.model.ts
export class User {
constructor(public username: string,
public password: string) {
}
}
登录.组件.ts:
import {Component, OnInit} from '@angular/core';
import {NgForm} from '@angular/forms';
import {HttpClient} from '@angular/common/http';
import {LoginService} from '../services/login.service';
import {User} from '../models/user.model';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {
user: User;
constructor(private httpClient: HttpClient, private loginService:
LoginService) { }
ngOnInit() {
}
onSubmit(form: NgForm) {
this.user.username = form.value['login'];
this.user.password = form.value['password'];
this.loginService.LoginUser(this.user).subscribe(res => {
console.log(res);
});
}
}
登录.service.ts:
import {User} from '../models/user.model';
import { HttpClient, HttpHeaders} from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import {Injectable} from '@angular/core';
@Injectable()
export class LoginService {
constructor(private http: HttpClient) { }
LoginUser(user: User): Observable<User> {
return this.http.post<User>('https://captn-boat-api.herokuapp.com/login', user)
;
}
}
登录.component.html
<div class="login--already-registered">
<span class="login--screen-title">J'ai déjà un compte</span>
<form class="login" method="GET" action="login" (ngSubmit)="onSubmit(f)" #f="ngForm">
<div class="input--field text dark">
<label for="login" class="control-label"><svg class="icon icon-envelope"><use xlink:href="#icon-envelope"></use></svg> E-mail</label>
<input id="login" name="login" type="text" placeholder="" value="" ngModel>
</div>
<div class="input--field password dark">
<label for="password" class="control-label"><svg class="icon icon-lock"><use xlink:href="#icon-lock"></use></svg> Mot de passe</label>
<input id="password" name="password" type="password" placeholder="" value="" ngModel>
</div>
<div class="input--field checkbox dark">
<label for="session"><input id="session" name="" value="session" type="checkbox"> se souvenir de moi</label>
</div>
<div class="login--submit">
<button class="button button btn-submit" type="submit">
你从不实例化用户......你可以改变你的onSubmit如下
而不是:
this.user.username = form.value['login'];
this.user.password = form.value['password'];
这样做....
this.user = new User(form.value['login'], form.value['password']);
但是你真的需要 User 类吗?为什么不直接定义一个 IUser 接口而不是 User 类并执行...
this.user = form.value;
this.loginService.LoginUser(this.user).subscribe(res => {
console.log(res);
});
最好的方法,使用 formGroup....
在 html... 中进行以下更改(这包括所需的用户名和密码验证,以及在表单无效时禁用提交按钮)...
<form class="login" method="GET" action="login" (ngSubmit)="onSubmit(f)" [formGroup]="formGroup">
<input id="login" name="login" type="text" formControlName="username">
<input id="password" name="password" type="password" formControlName="password">
<button class="button button btn-submit" type="submit" [disabled]="!formGroup.valid">
然后,在组件ts文件中....
formGroup: FormGroup = new FormGroup({
username: new FormControl(null, Validators.required),
password: new FormControl(null, Validators.required)
});
在你的 OnSubmit 函数中......
this.user = this.formGroup.value;
this.loginService.LoginUser(this.user).subscribe(res => {
console.log(res);
});
你必须初始化
user
。
将
user: User;
替换为 user: User= new User
或 user: User = {};