Angular 2 个表格我做错了什么

Question

我正在尝试使用 angular 2

创建简单的反应形式

这是我的 app.module.ts

import {NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {AppComponent} from './app.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

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

这是我的 app.component.ts

import { Component, VERSION, OnInit } from '@angular/core';
import { FormControl, FormGroup, FormBuilder } from '@angular/forms'

@Component({
  selector: 'my-app',
  template: `
    <form [formGroup]="loginForm" (submit)="submit($event)">
      <div>
        <label>login</label>
        <input formControllName="login" type="text">
      </div>

      <div>
        <label>password</label>
        <input formControllName="password" type="text">
      </div>

      <button type="submit" class="btn btn-primary">Submit</button>
    </form>

    <p>{{ loginForm.value | json }}</p>
  `,
})
export class AppComponent implements OnInit {
  public loginForm: FormGroup;

  constructor(private _fb: FormBuilder) { }

  ngOnInit() {
    this.loginForm = this._fb.group({
      login: [""],
      password: [""]
    })
  }

  submit(e) {
    e.preventDefault()
    console.log(this.loginForm.value)
  }
}

当我填写输入并单击 "submit" 时，loginForm 值仍为初始值。此外，当我填写输入时它不会改变。示例非常简单，但不起作用。我做错了什么？

这里是 link 的 plunker https://plnkr.co/edit/aMuYuRXMlTsox4TklHIg?p=preview

Answer 1

您拼写错误 formControllName - 额外 l

Angular 2 个表格我做错了什么

What am I doing wrong with Angular 2 forms

angular

typescript

angular-forms