【问题标题】:ERROR Error: Uncaught (in promise): Error: NodeInjector: NOT_FOUND [ControlContainer]错误错误:未捕获(承诺):错误:NodeInjector:NOT_FOUND [ControlContainer]
【发布时间】:2021-02-01 20:19:23
【问题描述】:

我正在尝试验证表单,但出现此错误。我已经实现了以下主题中的建议,但未成功:

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

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

我的代码:

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>

谢谢

【问题讨论】:

    标签: javascript angular forms


    【解决方案1】:

    我认为您在 app.module.ts 或使用表单的“页面”模块中缺少 FormsModule 和反应式表单模块。

    我建议你添加

    FormsModule,
    ReactiveFormsModule,
    

    到您的页面的导入,并将再次工作;) (criacao.module.ts)

    【讨论】:

      猜你喜欢
      • 2021-03-03
      • 2020-06-13
      • 2022-12-19
      • 2020-06-03
      • 2018-10-12
      • 1970-01-01
      • 2021-03-25
      • 2019-11-24
      • 2021-01-07
      相关资源
      最近更新 更多