添加ngform后不起作用的Angular App

Question

我正在尝试将Angular-App连接到API。我的问题是我的形式。在我的form

中使用ngform时，它似乎会破坏整个应用程序

我从表单中删除了所有ngforms，然后我的应用似乎再次起作用。

这是我的工作代码：

<div class="container">
  <form >
    <input type="hidden" name="Id" >
    <div class="input-field col s6">
      <input name="FirstName" >
    </div>
    <div class="input-field col s6">
      <input name="LastName">
    </div>
    <div class="input-field col s6">
      <input name="DateOfBirth" >
    </div> ...
</form>

这是破坏一切的代码

<div class="container">
  <form #form="ngForm" (submit)="onSubmit(form)" autocomplete="off">
    <input type="hidden" name="Id" #Id="ngModel" ngModel[(ngModel)]="service.formData.Id">
    <div class="input-field col s6">
      <input name="FirstName" #FirstName="ngModel" [(ngModel)]="service.formData.FirstName" class="form-control" required>
      <div class="validation-error" *ngIf="FirstName.invalid && FirstName.touched">Dieses Feld muss ausgefüllt sein</div>
    </div>
    <div class="input-field col s6">
      <input name="LastName" #LastName="ngModel" [(ngModel)]="service.formData.LastName" class="form-control" required>
      <div class="validation-error" *ngIf="LastName.invalid && LastName.touched">Dieses Feld muss ausgefüllt sein</div>
    </div>
    <div class="input-field col s6">
      <input name="DateOfBirth" #DateOfBirth="ngModel" [(ngModel)]="service.formData.DateOfBirth" class="form-control" required>
      <div class="validation-error" *ngIf="FirstName.invalid && FirstName.touched">Dieses Feld muss ausgefüllt sein</div>
    </div>

我看不到我在做什么错。特别是因为在将所有混乱添加到我的表格中时，我不仅打破了此HTML的输出，而且会破坏所有输出。插入ngform-stuff之后，我得到的只是空白页。当我只添加及其所有参数的表单标签而没有输入标签时，它也会破裂。

Answer 1

我认为ngmodel [(ngmodel(]不正确。希望这会有所帮助。

<input type="hidden" name="Id" #Id="ngModel" ngModel[(ngModel)]="service.formData.Id">  

我有疑问是否需要此隐藏的输入字段？我认为您可以轻松管理.TS文件中提交的ID。