0

I am working on a project where I want to display a form inside a bootstrap modal. I have added the bootstrap modal as available on their website and trying to add a reactive form in its body. Below is my code:

.html

           ...
          <div class="modal-body">
            <form [formGroup] = "addDataForm">
              <div class="form-group">
                <label>Project Type</label>
                <input type = "text" class="form-control" [formControlName] = "pt">
                <label>Fiscal Year (F.Y.)</label>
                <input type="text" class = "form-control" [formControlName] = "fiyr">
                <label>Task Description</label>
                <input type="text" class="form-control" [formControlName] = "td">
              </div>
            </form>
          </div>
          ...

.ts

addDataForm: FormGroup;
ngOnInit()
{
       this.addDataForm = new FormGroup({
      'pt': new FormControl(null),
      'fiyr': new FormControl(null),
      'td': new FormControl(null),
});

I have also imported both of these modules in:

app.module.ts

import { ReactiveFormsModule, FormsModule } from "@angular/forms";

I have tried different things after searching quite a bit and still getting this error:

Error: Uncaught (in promise): Error: NodeInjector: NOT_FOUND [ControlContainer]
Edric
  • 24,639
  • 13
  • 81
  • 91
Package.JSON
  • 301
  • 5
  • 25

1 Answers1

0

Since you are using [formGroup], you can do either of the following:

  1. formControlName="pt" for all form controls
  2. [formControl]="addDataForm.controls.pt", note that this would be an issue for nested formGroups.
Ankit
  • 143
  • 1
  • 8
  • I have tried both of these and I am still getting this error. – Package.JSON Nov 20 '20 at 06:44
  • You must be missing something then, here's the working example with your code components: https://stackblitz.com/edit/angular-sv6soq-psjthh?file=src/app/button-toggle-appearance-example.html – Ankit Nov 20 '20 at 06:51