Блог

Я пытаюсь отправить простую форму на свой контроллер, но продолжаю получать следующую ошибку: невозможно получить доступ к имени пользователя undefined. Насколько я могу судить, я инициализирую пользовательскую модель в своем компоненте входа в систему, но понятия не имею, почему она все еще выдает ошибку.

У кого-нибудь есть какие-нибудь идеи?

HTML

    <form #loginForm="ngForm" (ngSubmit) ="OnSubmit(loginForm)">
  <div class="form-row">
    <div class="form-group col-md-6">
      <input type="text" name="username" #username="ngModel" [(ngModel)]="user.username" class="form-control" />
    </div>
    <div class="form-group col-md-6">
      <input type="text" name="password" #password="ngModel" [(ngModel)]="user.password" class="form-control" />
    </div>
  </div>
  <div class="form-group">
    <button type="submit" class="btn btn-block btn-lg">login</button>
  </div>
  

user.model.ts

 export class UserModel {
  username: string;
  password: string;
}
  

user.service.ts

     import { HttpClient, HttpHeaders } from '@angular/common/http';
import { UserModel } from './user.model';
import { Inject, Injectable } from '@angular/core';

@Injectable()
export class UserService {
  constructor(private http: HttpClient) { }


  postUser(user: UserModel, @Inject('BASE_URL') baseUrl: string) {
    return this.http.post(baseUrl   '/Test/Register', new HttpHeaders({ 'username': user.username, 'password': user.password })).subscribe(result => {
      console.error(result)
    }, error => console.error(error));
  }
  

login.component.ts

   import { Component, Inject, OnInit } from '@angular/core';
import { NgForm } from '@angular/forms';
import { UserModel } from './user.model';
import { UserService } from './user.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})


export class LoginComponent implements OnInit {

  user: UserModel

  constructor(private userService: UserService) { }

  ngOnInit() {
    this.resetForm();
  }
  resetForm(form?: NgForm) {
    if (form != null) {
    form.reset();
      this.user = {
      username: '',
      password: ''
      }
    }
  }

  onSubmit(form: NgForm) {
    this.userService.postUser(form.value, "https://localhost:44327/");
  };
  

Это вызвано тем, что вы не инициализировали this.user при загрузке этой страницы.

Попробуйте это:

 resetForm(form?: NgForm) {
    if (this.user == undefined) {
        this.user = new UserModel();
    }
    if (form != null) {
        form.reset();
        this.user = {
            username: '',
            password: ''
        }
    }
}