ОШИБКА TypeError: Невозможно установить свойство 'username' из неопределенного - PullRequest
Новая
       38

ОШИБКА TypeError: Невозможно установить свойство 'username' из неопределенного

0 голосов
/ 27 мая 2019

Мне нужно запросить мой API (https://myurl.com/login) для входа в систему (имя пользователя + пароль) в угловой версии 7.3. Когда я использую POST без user.models.ts, я получил ошибку неверного запроса. При использовании этой модели яОшибка

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

login.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">

Ответы [ 3 ]

1 голос
/ 27 мая 2019

Вы никогда не создаете экземпляр пользователя ..... Вы можете изменить свой 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);
});
0 голосов
/ 27 мая 2019

Вы должны инициализировать user.

Заменить user: User; на user: User= new User или user: User = {};

0 голосов
/ 27 мая 2019

В этом случае вы можете использовать интерфейс 

export interface IUser {
  username: string;
  password: string;
}

Затем вы можете изменить код на 

export class LoginComponent implements OnInit {
   user: IUser;
...