Angular 2 [(ngModel)] 放置在 <form></form> 之间时会引发错误答案

【问题标题】：Angular 2 [(ngModel)] throws error when placed between <form></form>Angular 2 [(ngModel)] 放置在 <form></form> 之间时会引发错误
【发布时间】：2017-01-30 23:17:45
【问题描述】：

我有一个带有如下代码的表单的 component.html：

<div *ngIf="client">
    //More divs
   <form class="form-horizontal" (ngSubmit)="onSubmit()" #clientForm="ngForm">
      <div>
         <input class="form-control" #name="ngModel" [(ngModel)]="client.name" required>
      </div>
    //End of more divs
   </form>
</div>

但是当组件渲染 html 时我不断收到错误：

Uncaught (in promise): TypeError: undefined is not an object

只有当我在表单之间放置 输入标签 时才会发生这种情况。它应该在哪里。如果我将输入标签放在 form 标签 上方和之前，它可以很好地处理数据。为什么会发生这种情况？

【问题讨论】：

另外你的结束标签在哪里？

标签： angular angular-ngmodel angular2-forms angular2-ngmodel

【解决方案1】：

您在输入控件上缺少name 属性。应该是

<input class="form-control" name="clientName" #name="ngModel" [(ngModel)]="client.name" required>

如果删除 name 属性并打开控制台，您将看到如下错误消息：

如果在表单标签中使用 ngModel，则 name 属性必须设置或形式控件必须在 ngModelOptions 中定义为“独立”。

这是Plunker

【讨论】：

【解决方案2】：

这不是关于放置我假设你没有定义对象client，因为你绑定到client.name；您必须初始化为默认值，例如

client = {};

在您的组件或真实客户端对象中

PS。我想建议你停止使用 NGModel go with FormGroup。开始使用后，您会爱上它们 :) 快速、简单且灵活

【讨论】：

对象已定义，*ngIf 也有效，不知道为什么 ngModel 不在这里。我更新了上面的代码来说明标签在哪里
如果你将 [(ngModel)]="client.name" 更新为 [(ngModel)]="test"
我收到相同的结果