Question

我正在尝试将Angular-App连接到Api。我的问题是我在Angular中的表单。在我的表单中使用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后得到的所有内容都是空白页。当我只添加带有所有参数的form标记而不在其中添加input标记时，它也会中断。

Answer 1

我认为ngModel [（ngModel）]不正确。希望这会有所帮助。

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

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

添加ngForm后，Angular应用无法正常工作

1 个答案: