Angular 2响应式表单值不更新求助：提交仍为初始值

嘿，我一眼就发现问题所在啦！你在模板里把响应式表单的核心指令拼写错误了——formControllName应该改成formControlName（注意是control而不是controll，多写了一个字母l）。

这个拼写错误会让Angular完全识别不了绑定指令，输入框和loginForm里的表单控件根本没建立关联，所以不管你怎么输入内容，表单的值都一直停留在初始状态，提交自然也拿不到正确的输入值。

修正后的app.component.ts模板代码： #

@Component({
  selector: 'my-app',
  template: `
    <form [formGroup]="loginForm" (submit)="submit($event)">
      <div>
        <label>login</label>
        <input formControlName="login" type="text"> <!-- 修正拼写错误 -->
      </div>
      <div>
        <label>password</label>
        <input formControlName="password" type="text"> <!-- 修正拼写错误 -->
      </div>
      <button type="submit" class="btn btn-primary">Submit</button>
    </form>
    <p>{{ loginForm.value | json }}</p>
  `,
})

修正之后，你再输入内容就能看到<p>标签里的表单值实时更新了，点击提交按钮也能在控制台拿到正确的输入数据啦。

内容的提问来源于stack exchange，提问作者user2958747