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>

然后我从'@ angular / forms'中添加了导入{FormsModule，ReactiveFormsModule};和进口：[ 通用模块表格模块 ReactiveForms模块 ]作为我组件的相关模块。不仅如此，我还将上述导入添加到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代码

profileData = {}

希望这对您有用

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

2 个答案: