angular - 从用户注册获取用户信息的问题，以及 HTML 视图问题

问题描述

好的，所以我遇到的第一个问题是“ERROR TypeError: Cannot read property 'FirstName' of undefined”，所以我尝试在线寻找解决方案，但找不到解决问题的解决方案。我所做的尝试是添加*ngIf="user"到输入标签，这似乎消除了 Web 控制台错误，但似乎输出 html 时出现问题，它看起来像这样：

但是，它应该看起来像这样：

我真的不确定，如果我正确设置了组件，我想知道如何解决这个问题？

注册.component.html

<div class="row">      
    <div class="card">          
        <div class="sm-jumbotron center-align">              
          <h2>User Registration</h2>
        </div>
      </div>
      <form [formGroup]="userRegistrationForm" (ngSubmit)="onSubmit()"  autocomplete="off">
        <div class="row">
      <div class="input-field col s6">   
        <label>First Name</label>
        <input type="text" formControlName="FirstName" class="form-control" [(ngModel)]="user.FirstName" >          
        </div>
          <div class="input-field col s6">
            <label>Last Name</label>
              <input type="text" formControlName="LastName" *ngIf="user" class="form-control" [(ngModel)]="user.LastName">                
              </div>
        </div>
        <div class="row">
            <div class="input-field col s12">
              <label data-error="Required Field">Username</label>
              <input type="text" class="form-control" formControlName="Username" *ngIf="user" [(ngModel)]="user.UserName">                  
              </div>
            </div>
        <div class="row">
          <div class="input-field col s12">
            <label>Password</label>
            <input type="password" class="form-control" formControlName="Password" *ngIf="user" [(ngModel)]="user.Password">            
            </div>
          </div>
          <div class="row">
            <div class="input-field col s12">
              <label data-error="Invalid email">Email</label>
              <input type="text" formControlName="Email" *ngIf="user" class="form-control" [(ngModel)]="user.Email" [pattern]="emailPattern">                
              </div>
            </div>
            <div class="row">
              <div class="input-field col s12">
                <button type="submit" class="btn-large btn-submit" *ngIf="user" [disabled]="!userRegistrationForm.valid">Submit</button>
              </div>
            </div>
            </form>
          </div>

注册.component.ts

import { Component, OnInit } from '@angular/core';
import { User } from '../shared/user.model';
import { NgForm, FormGroup, ReactiveFormsModule, FormBuilder, FormControl, Validators } from '@angular/forms';
import { UserService } from '../shared/user.service';
import {ToastrService} from 'ngx-toastr';

@Component({
  selector: 'app-sign-up', //used in app.component.html
  templateUrl: './sign-up.component.html',
  styleUrls: ['./sign-up.component.css']
})
export class SignUpComponent implements OnInit {
  user:User;
  userRegistrationForm: FormGroup;
  emailPattern = "^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$";

  constructor(private userService:UserService, private toastr: ToastrService, private fb: FormBuilder) { }

  ngOnInit() {
    this.createRegisterForm();
  }

  createRegisterForm() {
    this.userRegistrationForm = this.fb.group({
      FirstName: ['', Validators.required],
      LastName:  ['', Validators.required],
      Username:  ['', Validators.required],
      Password:  ['', Validators.required],
      Email: ['', Validators.required]
  });
} 

  onSubmit(form:FormGroup) {
    if (this.userRegistrationForm.valid) {
      //this.user = Object.assign({}, this.userRegistrationForm.value);
      this.userService.registerUser(this.user).subscribe((data:any) => {      
        this.toastr.success("User Registration Successful"); 
      }, error => {
        this.toastr.error(error);
    }); 
    }
  }


}

用户服务.ts

import { Injectable } from '@angular/core';
import {HttpClient, HttpParams, HttpResponse} from '@angular/common/http';
import {Observable} from 'rxjs';
import {map} from 'rxjs/operators';
import { User } from './user.model';

@Injectable({
  providedIn: 'root'
})
export class UserService {
  readonly rootUrl = "http://localhost:5000/" //connect to API
  constructor(private http: HttpClient) { }

  registerUser(user : User) : Observable<User> 
  {
    const body : User = {
      FirstName:user.FirstName,
      LastName:user.LastName,
      UserName: user.UserName,
      Password: user.Password,
      Email: user.Email      
    }
    return this.http.post<User>(this.rootUrl + 'api/User/Register', body);
  }
}

标签： angular

angular - 从用户注册获取用户信息的问题，以及 HTML 视图问题

问题描述

解决方案

推荐阅读