각도 5: "컨트롤 컨테이너 공급자 없음"

각도 5: "컨트롤 컨테이너 공급자 없음"

Angular 5가 있는 작은 웹 앱을 가지고 있는데 갑자기 브라우저 콘솔에 다음과 같은 이상한 오류 메시지가 나타납니다.

ncaught Error: Template parse errors:
No provider for ControlContainer ("
</p>
<form class="container" (ngSubmit)="update()">
  [ERROR ->]<app-form-group-component 
[formGroup]="additionalInformation"></app-form-group-component>
      <button "): ng:///AppModule/KickoffComponent.html@4:2

그것은 전에는 일어나지 않았고 저는 어떠한 변경사항도 인지하지 못했습니다.그리고 저는 그 메시지가 저에게 무엇을 말하려고 하는지 전혀 모릅니다.

다음은 폼 그룹의 구성 요소 템플릿으로, 잘못된 것 같습니다.

<div *ngFor='let e of formGroup' class="form-group">
<label for="{{e.key}}">{{e.label}}</label>
<input type="{{e.type}}" name="{{e.key}}" 
[(ngModel)]="e.value" class="form-control" 
[ngClass]='{"is-valid": e.valid === true && e.required === true}'
        />
    </div>

다음은 폼 그룹을 사용하는 템플릿입니다.

<form class="container" (ngSubmit)="update()">
 <app-form-group-component [formGroup]="additionalInformation"></app-form-group-component>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>
<app-notification [notification]="notification"></app-notification>

저는 몇 시간 동안 그것을 응시했지만, 어떤 실수도 찾을 수 없습니다.

저는 Angular's Form Group을 사용하는 것이 아니라 저만의 솔루션을 사용한다는 것을 언급해야 합니다(왜냐하면 저는 그들의 솔루션이 과도하게 설계되었고 저의 특정 요구 사항에 맞지 않는다고 생각했기 때문입니다).혹시 이름 충돌 같은 게 있을까요?물론, 저는 app.module에서 양방향 바인딩과 폼의 제출을 가로채기 위해 FormsModule을 가져왔습니다.알림 구성 요소는 최소한 불만 없이 작동합니다.

어떤 도움이라도 주시면 대단히 감사하겠습니다.

편집: TS 코드를 공유하라는 요청을 받았습니다.

실패한 구성 요소:

import { Component, Input } from '@angular/core';
import { FormGroup } from '../../models/form-group';

@Component({
  selector: 'app-form-group-component',
  templateUrl: './form-group.component.html',
})
export class FormGroupComponent {
  @Input() formGroup?: FormGroup
}

FormGroup 유형은 배열일 뿐이며 구성 요소는 시각적 래퍼일 뿐입니다.관련된 추가 서비스나 DI 및 해당 구성 요소가 없는 Angular 컴파일은 정상입니다. (formGroup은 TS가 초기화되지 않는다고 계속 불평하지만 런타임에는 항상 초기화됩니다.)

속성을 넘겨주는 구성 요소:

import { Component, OnInit } from "@angular/core";
import { additionalInformation } from "./additional-information";
import { basicInformation } from "./basic-information";
...

@Component({
  selector: "app-kickoff",
  templateUrl: "./kickoff.component.html",
})
export class KickoffComponent implements OnInit {
  basicInformation: FormGroup = basicInformation;
  additionalInformation: FormGroup = additionalInformation;
  methods...
}

편집: @Andrei의 질문에 대답하기:ControlContainer라는 서비스나 공급자가 없습니다.저는 단지 세 개의 작은 서비스를 가지고 있을 뿐이고, 그 중 어느 것도 문제를 일으키지 않습니다.제가 알기로는 ControlContainer는 DI와 관련이 있지만, Angular의 그 주제에 대한 문서는 다소 이해하기 어렵습니다.

그ControlContainer에 의해 확장된 추상 클래스입니다.AbstractFormGroupDirective에의 에.ReactiveFormsModule.

사용 중인 경우 오류가 발생합니다.ReactiveFormsModule a 리고a.<form>-a 없 는 상가▁a가 없는 .FormGroup을 통해 그것에 결부된.[formGroup]="myForm".

는 을 만들어야 .FormGroup그리고 그것을 당신의 형태에 묶습니다.

<form class="container" [formGroup]="myForm" (ngSubmit)="update()">

또한 두 가지를 모두 가지고 있는지 확인하십시오.FormsModule 리고그고.ReactiveFormsModule모듈 가져오기에 추가되었습니다.

Me의 경우, 저는 ReactiveFormsModule만 가져왔고 FormsModule은 가져오지 않은 것으로 나타났습니다.둘 다 가져와야 합니다.

그 오류는 아무 관련이 없는 것으로 밝혀졌습니다.form에 formGroup는 받는 도 하만수신변이지름정다니합도수지▁the▁also▁but다▁naming니▁me지합정.formGroup그것은 Angular의 완전한 혼란입니다.

이 변수의 이름을 바꾸기만 하면 문제가 해결됩니다.이제 괜찮습니다.

<form class="container" (ngSubmit)="update()">
 <app-form-group [fg]="additionalInformation"></app-form-group>
 <button type="submit" class="btn btn-primary">Submit</button>
</form>

는 이문는가때발다니를 때 합니다.ReactiveFormsModule 누락된 방불명의FormsModule모듈에 있습니다. 요소가 .

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

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...
    ReactiveFormsModule,
    FormsModule
  ]
})
export class XXXModule { }

하는 동안 이 하여 Angular CLI를 .ReactiveFormsModule그리고 나서 나는 그것을 가져오고 등록했습니다.FormsModule오류를 수정합니다.나는 앱을 제공하고 있었습니다.ng serve.FormsModule오류를 수정하기 위해 모듈 클래스를 다시 컴파일하기 위해 서비스를 중단하고 다시 시작해야 했습니다.

앱 모듈에 구성 요소를 등록하지 않은 경우 해당 구성 요소의 모듈에서 반응형 양식 모듈을 가져와야 합니다.

저는 두 가지 변화로 이것을 해결할 수 있었습니다.

저는 제 부품을 자체 모듈에 넣었습니다.저는 그 특정 모듈을 app.module로 가져와야 했습니다.그것이 해결책을 찾는 데 반쯤 도움이 되었습니다.

구성요소에서 값이 생성되고 양식 그룹에 표시되는 필드도 몇 개 가지고 있었습니다.일단 폼 그룹에서 그것들을 꺼내서 별도의 디바에 넣으면, 저는 떠날 준비가 되었습니다.

누군가가 여전히 이것에 대해 문제를 가지고 있을지도 모릅니다.저도 같은 오류에 부딪혔습니다.그러나 반응형 양식 모듈 또는 양식 모듈 가져오기와 관련이 없습니다.

저의 경우 다른 디렉토리에서 구성 요소 디렉토리를 복사했는데 ~.component.scss에서 가져온 SCSS는 복사한 초기 디렉토리와 관련이 있습니다.

오류로 인해 이러한 경우가 발생하지 않았으며 다른 구성 요소 파일을 확인하는 것을 고려하는 데 약간의 시간이 걸렸습니다.두르!

TAB 애플리케이션을 생성하는 사용자의 경우 FormsModule 및 ReactiveFormsModule에 대한 가져오기를 탭1.module.ts에 추가해야 했습니다.저는 이런 종류의 세나리오에 대한 다른 답을 찾지 못해서 공유하려고 생각했습니다.

는 이 , 이오가발때생반마다응라는 이름의 합니다.@Input formGroup내 부품 중 하나에.

오류: @Input에 예약된 단어를 사용하는 중

요소

@Input()
formGroup: FormGroup;

사용하기

<!-- Angular now thinks this is a form which causes the error -->
<my-own-component [formGroup]="formGroup"></my-own-component>

솔루션 1: @Input에 다른 단어 사용

요소

@Input()
form: FormGroup;

사용하기

<!-- This works -->
<my-own-component [form]="formGroup"></my-own-component>

솔루션 2: 입력에 별칭 지정

요소

@Input("form")
formGroup: FormGroup;

사용하기

<!-- This works too -->
<my-own-component [form]="formGroup"></my-own-component>

저는 Angular 9에서 같은 문제를 발견했습니다.제거하는 데 도움이 된 유일한 솔루션@Host ()생성자의 종속성 선언에서.앵귤러 신형 렌더링 엔진 아이비는 장식기를 좋아하지 않습니다.

여기서 해결책을 찾지 못했지만 마지막에 추가해야 했습니다.

viewProviders: [{provide: ControlContainer, useExisting: NgForm}]

에게@Component내 유형 스크립트 클래스는 다음과 같습니다.

@Component({
  selector: 'my-app',
  templateUrl: './my-app.html',
  styleUrls: ['./my-app.component.scss'],
  viewProviders: [{provide: ControlContainer, useExisting: NgForm}]
})
export class MyAppComponent {

그래서 저는 '반응형 모듈'을 제 최상위 모듈 중 하나의 내보내기 섹션에 넣었기 때문입니다.

부트스트랩 클래스가 각도와 충돌했습니다.

나는 부트스트랩 클래스로 최상위 디브이를 제거해야 했습니다.

언급URL : https://stackoverflow.com/questions/48959037/angular-5-no-provider-for-controlcontainer