Question

我有一个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

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

Answer 1

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

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

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

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

这是Plunker

Answer 2

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

client = {};

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

PS。我建议你停止使用NGModel和FormGroup一起使用。在你开始使用它之后你会喜欢它们:)快速，简单和灵活

放置在<form> </form>之间时，Angular 2 [（ngModel）]会抛出错误

2 个答案: