ERROR Error: Uncaught (in promise): Error: NodeInjector: NOT_FOUND [ControlContainer]

Question

I'm trying to validate a form, but i'm getting this error. I've alredy implemented what was suggested in the topics bellow, unsuccessfully:

Getting error suddenly in Angular Error: NodeInjector: NOT_FOUND [ControlContainer]

Using forms in Ionic throws Error: NodeInjector: NOT_FOUND [ControlContainer]

My code:

app.module.ts:

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { RouterModule } from '@angular/router';

import { AppRoutingModule } from './app.routing';
import { NavbarModule } from './shared/navbar/navbar.module';
import { FooterModule } from './shared/footer/footer.module';
import { SidebarModule } from './sidebar/sidebar.module';

import { AppComponent } from './app.component';

import { AdminLayoutComponent } from './layouts/admin-layout/admin-layout.component';
import { CriacaoComponent } from './Criacao/Criacao.component';
import { ModalModule } from 'ngx-bootstrap/modal'
import { CommonModule } from '@angular/common';

@NgModule({
  imports: [
    BrowserModule, 
    BrowserAnimationsModule,
    FormsModule,
    ReactiveFormsModule,
    RouterModule,
    HttpClientModule,
    NavbarModule,
    FooterModule,
    SidebarModule,
    AppRoutingModule,
    ModalModule.forRoot(),
    CommonModule,
  ],
  declarations: [       
    AppComponent,
    AdminLayoutComponent,
    CriacaoComponent
   ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

criacao.component.ts

import { Component, OnInit, TemplateRef  } from '@angular/core';
import { FormBuilder, FormGroup, Validators, FormControl  } from '@angular/forms';
import { Pdm } from 'app/_models/Pdms';
import { Solicitacao } from 'app/_models/Solicitacoes';
import { PdmsService } from 'app/_services/Pdms.service';
import { ModalModule, BsModalService, BsModalRef  } from 'ngx-bootstrap/modal';


@Component({
  selector: 'app-criacao',
  templateUrl: './criacao.component.html',
  styleUrls: ['./criacao.component.scss']
})
export class CriacaoComponent implements OnInit {
  
  pdms: Pdm[];
  pdm: Pdm;
  modalRef: BsModalRef;
  registerForm: FormGroup;
  solicitacao: Solicitacao;

  constructor(
    private pdmsService: PdmsService,
    private modalService: BsModalService,
    private fb: FormBuilder
  ) { }

  ngOnInit() {
    this.getSolicitacoes();
    this.validation();
  }

  validation() {
    this.registerForm = this.fb.group({
      ncm: ['', Validators.required],
      // ncm: ['', [Validators.required, Validators.minLength(8), Validators.maxLength(8)]],
      tipoSolicitacao: ['', Validators.required],
      grupo: ['', Validators.required],
      tipoMaterial: ['', Validators.required],
      unidadeMedida: ['', Validators.required],
      textoBreve: ['', [Validators.required, Validators.maxLength(40)]],
      textoPedidoCompras: ['', Validators.required],
    });
  }

  getSolicitacoes() {
    //this.dataAtual = new Date().getMilliseconds().toString();

    this.pdmsService.getAllPdms().subscribe(
      (_solicitacoes: Pdm[]) => {
        this.pdms = _solicitacoes;
        //this.solicitaoesFiltradas = this.solicitacoes;
        console.log(this.pdms);
      }, error => {
        console.log("erro");
      });
  }

  openModal(template: TemplateRef<any>) {
    this.modalRef = this.modalService.show(template);
  }

}

criacao.component.html:

<div class="col-md-6">
  <form [formGroup]="registerForm">
      
      
      <!-- <div class="form-group">
        <label for="inputAddress">Address</label>
        <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
      </div> -->

      <div class="form-group" class="form-group col-md-3" >
        <label >NCM</label>
        <input type="text" class="form-control" placeholder="Descrição curta" [(ngModel)]="solicitacao.ncm" [ngClass]="{'is-invalid': registerForm.get('ncm').errors && registerForm.get('ncm').touched}" Name="ncm" FormControlName="ncm">
        <div *ngIf="registerForm.get('ncm').hasError('required')
              && registerForm.get('ncm').touched" class="invalid-feedback">
                Tema é obrigatório.
        </div>
      </div>

      <div class="form-row">
        <div class="form-group col-md-6">
          <label for="inputCity">City</label>
          <input type="text" class="form-control" id="inputCity">
        </div>
        
        <div class="form-group col-md-4" >
          <label for="inputState">State</label>
          <select id="inputState" class="form-control">
            <option selected>Escolha PDM </option>
            <option *ngFor = "let pdm of pdms">{{pdm.descricao}}</option>
          </select>
        </div>
      </div>

      <button class="btn btn-primary ml-auto">
        Salvar Alterações
      </button>


  
  </form>
</div>

<button type="button" class="btn btn-primary" (click)="openModal(template)">Create template modal</button>
 

<ng-template #template>
  <div class="modal-header">
    <h4 class="modal-title pull-left">Modal</h4>
    <button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <label></label>
  </div>
</ng-template>

Thanks

score 0 · Answer 1 · answered Dec 08 '20 at 12:31

I think that you are missing the FormsModule and the reactive forms module in your app.module.ts or your "page" module where you use the forms.

I recommend you to add the

FormsModule,
ReactiveFormsModule,

to the imports of your page and will work again ;) (criacao.module.ts)

ERROR Error: Uncaught (in promise): Error: NodeInjector: NOT_FOUND [ControlContainer]

1 Answers1