当我添加[（ngModel）]时，Angular.JS失去了HTML格式

Question

I am trying to create a simple form with validations in Angular.JS. Just learning how to use the framework. When I add [(ngModel)] to my first form input, I lose all the HTML. When I take it out [(ngModel)], all the html returns. Here is my code:

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

What is creating this problem?

Answer 1

The forms module needs to be imported and provided at the module level, not at the component level. Your app module should look like:

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

I believe you encountered a syntax error whenever you add [(ngModel)]="user.firstname" due to user.firstname being undefined.

first of all change the way you declare these public variables:

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

second your User declaration should be changed too:

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

hope that helps