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

Question

I created a template driven form. It's as follows

    <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>

Then I added import { FormsModule, ReactiveFormsModule } from '@angular/forms'; and imports: [ CommonModule, FormsModule, ReactiveFormsModule ] for the relevant module of my component. Not only that , but also I added the above imports to app.module.ts But I'm getting the error

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

Please don't duplicate this question. I tried other solutions as well. Can someone help me.

Answer 1

Your organization must be ngModel

Change it to this

<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>

and also you need to add name to each input, the name will be serve as your property name.

see stackblitz for the complete guide https://stackblitz.com/edit/angular-ppkntl