没有 "exportAs" 设置为 "ngForm" 的指令 - 无法使用解决方案

Question

我创建了一个模板驱动的表单。如下

    <div class="col-md-4 col-md-offset-4">
  <form #profileForm="ngForm" (ngSubmit)="sendUpdatedData(profileForm)">
      <div class="form-group">
        <label for="firstName">First Name</label>
        <input type="text" ngModel  #firstName="ngModel" class="form-control" id="firstName" placeholder="First Name" value="{{profileData?.firstName}}">
      </div>

      <div class="form-group">
          <label for="lastName">Last Name</label>
          <input type="text" ngModel  #lastName="ngModel" class="form-control" id="lastName" placeholder="Last Name" value="{{profileData?.lastName}}">
      </div>

      <div class="form-group">
            <label for="organization">Organization</label>
            <input type="text" ngModel  #organization="organization"  class="form-control" id="organization" placeholder="Organization" value="{{profileData?.organisation}}">
      </div>
        <button type="submit" class="btn btn-primary">Submit</button>
  </form>
</div>

然后我添加了 import { FormsModule, ReactiveFormsModule } from '@angular/forms';和进口：[ 通用模块，表单模块， ReactiveFormsModule ] 对于我的组件的相关模块。不仅如此，我还将上述导入添加到 app.module.ts 但我收到错误

    ERROR Error: Uncaught (in promise): Error: Template parse errors:
There is no directive with "exportAs" set to "ngForm"

请不要重复这个问题。我也尝试了其他解决方案。谁能帮帮我。

Answer 1

您的组织必须是 ngModel

改成这样

<form #profileForm="ngForm" (ngSubmit)="sendUpdatedData(profileForm)">
      <div class="form-group">
        <label for="firstName">First Name</label>
        <input type="text" ngModel  #firstName="ngModel" class="form-control" name="firstName" placeholder="First Name" value="{{profileData?.firstName}}">
      </div>

      <div class="form-group">
          <label for="lastName">Last Name</label>
          <input type="text" ngModel  #lastName="ngModel" class="form-control" name="lastName" placeholder="Last Name" value="{{profileData?.lastName}}">
      </div>

      <div class="form-group">
            <label for="organization">Organization</label>
            <input type="text" ngModel  #organization="ngModel"  class="form-control" name="organization" placeholder="Organization" value="{{profileData?.organisation}}">
      </div>
        <button type="submit" class="btn btn-primary">Submit</button>
 </form>

并且您还需要为每个输入添加名称，该名称将作为您的属性名称。

有关完整指南，请参阅 stackblitz https://stackblitz.com/edit/angular-ppkntl

Answer 2

//HTML Template
<div class="col-md-4 col-md-offset-4">
  <form #profileForm="ngForm" (ngSubmit)="sendUpdatedData(profileForm)">
      <div class="form-group">




        <label for="firstName">First Name</label>

         <input type="text" class="form-control" id="firstName"
               [(ngModel)]="profileData.firstName" name="firstName"
               #firstName="ngModel"  placeholder="First Name">


      </div>

      <div class="form-group">

          <label for="lastName">Last Name</label>
           <input type="text" class="form-control" id="lastName"
               [(ngModel)]="profileData.lastName" name="lastName"
               #lastName="ngModel"  placeholder="Last Name">

      </div>

      <div class="form-group">
            <label for="organization">Organization</label>

             <input type="text" class="form-control" id="organization"
               [(ngModel)]="profileData.organization" name="organization"
               #organization="ngModel"  placeholder="Organization">


      </div>
        <button type="submit" class="btn btn-primary">Submit</button>
  </form>
</div>

// TS代码

个人资料数据 = {}

希望这对你有用

没有 "exportAs" 设置为 "ngForm" 的指令 - 无法使用解决方案

There is no directive with "exportAs" set to "ngForm" - not working with solutions

angular

angular-forms