Error when creating reactive form in angular

Question

I'm getting the following error when creating a reactive form in Angular 10:

No provider for ControlContainer core.js:4127 ERROR Error: NodeInjector: NOT_FOUND [ControlContainer]

HTML Code

    <form [formGroup]="signupForm" (ngSubmit)="onSubmit()">
    
            <div class="form-group">
              <label for="projectName">Project Name</label>
              <input formControlName="projectName" type="text" class="form-control" id="projectName"> 
            </div>
    
            <div class="form-group">
              <label for="email">E-Mail</label>
              <input formControlName="mail" type="text" class="form-control" id="mail"> 
            </div>
    
            <div class="form-group">
              <label for="prjectStatus">Project Status</label>
              <select formControlName="projectStatus" class="form-control" id="prjectStatus">
                <option value="stable">Stable</option>
                <option value="critical">Critical</option>
                <option value="finished">Finished</option>
              </select> 
            </div>
            <div class="form-group">
                <button type="submit" class="btn btn-primary">Submit</button>
            </div>
          </form>

Typescript Code:

     import { Component, OnInit } from '@angular/core';
        import { FormControl, FormGroup } from '@angular/forms';
        
        @Component({
          selector: 'app-root',
          templateUrl: './app.component.html',
          styleUrls: ['./app.component.css']
        })
    
        export class AppComponent implements OnInit {
        
          signupForm: FormGroup;
        
          ngOnInit(): void {
        
            this.signupForm = new FormGroup({
              'projectName' : new FormControl(null),
              'email' : new FormControl(null),
              'projectStatus' : new FormControl('critical')
            });
          }
        }

You will Find your answer here stackoverflow.com/questions/48959037/… — Abdelmlak Dhif
– Abdelmlak Dhif, Commented Dec 2, 2020 at 9:39

Yair Cohen · Accepted Answer · 2020-12-02 06:45:18Z

1

Try importing FormsModule in addition to ReactiveFormsModule in the relevant module. (or app module if you want it available globally)

answered Dec 2, 2020 at 6:45

Yair Cohen

2,28111 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ahmed Abdelghany · Accepted Answer · 2020-12-02 10:46:27Z

0

Solved by adding ReactiveFormsModule to the imports Array of app.module.ts & importing ReactiveFormsModule from '@angular/forms'

edited Dec 2, 2020 at 10:46

answered Dec 2, 2020 at 10:41

Ahmed Abdelghany

1433 silver badges8 bronze badges

Collectives™ on Stack Overflow

Error when creating reactive form in angular

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related