Javascript Angular.JS在添加[（ngModel）]时丢失表单HTML

我试图在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>

---

是什么造成了这个问题？

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

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 { }

---

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

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 { }

---

我相信您在添加

[（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 = "";
}

其次，您的

用户

声明也应更改：

@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();
  }
}

---

希望这对您有所帮助，我相信您在添加

[（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 = "";
}

其次，您的

用户

声明也应更改：

@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();
  }
}

---

希望对您有所帮助

您可以添加您的

app.module.ts

编辑我的问题以包括这些内容吗？您可以添加您的

app.module.ts

编辑我的问题以包括这些内容吗？您仍然可以将所有内容放在一起：您的意思是您可以将其放在同一个文件中。谢谢大家的帮助！我的模块设置错误。您仍然可以将所有模块放在一起：您的意思是您可以将其放在同一个文件中。谢谢大家的帮助！我的模块设置错误。