当我添加 [(ngModel)] 时，Angular.JS 丢失表单 HTML

Question

我正在尝试在 Angular.JS 中创建一个带有验证的简单表单。只是学习如何使用框架。当我将 [(ngModel)] 添加到我的第一个表单输入时，我丢失了所有 HTML。当我取出 [(ngModel)] 时，所有的 html 都会返回。这是我的代码：

app/user.ts

export class User {
  constructor(
    public firstname: string = "",
    public lastname: string = "",
    public email: string = "",
    public password: string = "",
    public address: string = "",
    public unitaptnumber: string = "",
    public city: string = "",
    public state: string = "",
    public luck: string = "",
 ){}
}

app/app.component.ts

import { Component } from '@angular/core';
import { User } from './user';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
 user = new User();
 users = [];
 onSubmit(){
   this.users.push(this.user);
   this.user = new User();
 }
}

app/app.component.html

<h1>Registration</h1>
<h3>Account Information</h3>

<form (submit)="onSubmit()">

  First Name <input 
  type="text" 
  name="firstname" 
  required
  [(ngModel)]="user.firstname"
  #firstname="ngModel"
  >

  <input type="submit" value="Register">

</form>

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http';
import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

是什么造成了这个问题？

Answer 1

表单模块需要在模块级别而不是组件级别导入和提供。您的应用模块应如下所示：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http';
import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 2

我相信您在添加 [(ngModel)]="user.firstname" 时遇到了语法错误，因为 user.firstname 未定义。

首先改变你声明这些公共变量的方式：

export class User {
  public firstname: string = "";
  public lastname: string = "";
  public email: string = "";
  public password: string = "";
  public address: string = "";
  public unitaptnumber: string = "";
  public city: string = "";
  public state: string = "";
  public luck: string = "";
}

您的User 声明也应该更改：

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent
{
  // make this of type User
  user:  User;
  users: any;

  constructor()
  {
    // init code goes here always
    this.user  = new User();
    this.users = [];
  }

  onSubmit(){
    this.users.push(this.user);
    this.user = new User();
  }
}

希望对你有帮助