formGroup은 FormGroup 인스턴스를 필요로 합니다.

formGroup은 FormGroup 인스턴스를 필요로 합니다.

Plunkr에 다음 오류를 던지는 것으로 보이는 Angular 2 RC4 기본 폼 예제가 있습니다(Chrome DEV 콘솔에서).

여기 플렁커가 있습니다.

https://plnkr.co/edit/GtPDxw?p=preview

오류:

browser_adapter.ts:82 EXCEPTION: Error: Uncaught (in promise): EXCEPTION: Error in ./App class App - inline template:1:7
ORIGINAL EXCEPTION: formGroup expects a FormGroup instance. Please pass one in.
           Example: <form [formGroup]="myFormGroup">

ORIGINAL STACKTRACE:
Error: formGroup expects a FormGroup instance. Please pass one in.
           Example: <form [formGroup]="myFormGroup">

    at new BaseException (https://npmcdn.com/@angular/forms@0.2.0/src/facade/exceptions.js:27:23)
    at FormGroupDirective._checkFormPresent (https://npmcdn.com/@angular/forms@0.2.0/src/directives/reactive_directives/form_group_directive.js:110:19)
    at FormGroupDirective.ngOnChanges (https://npmcdn.com/@angular/forms@0.2.0/src/directives/reactive_directives/form_group_directive.js:39:14)
    at DebugAppView._View_App0.detectChangesInter

코드에 몇 가지 문제가 있습니다.

• <div [formGroup]="form">바깥쪽에<form>꼬리표를 붙이다
• <form [formGroup]="form">하지만 그가 포함된 부동산의 이름.FormGroup가loginForm그러므로 그래야 합니다.<form [formGroup]="loginForm">
• [formControlName]="dob"그것은 그 부동산의 가치를 넘깁니다.dob존재하지 않는 것입니다.당신에게 필요한 것은 그 끈을 건네는 것입니다.dob맘에 들다[formControlName]="'dob'"아니면 단순한formControlName="dob"

플렁커 예제

저는 이 문제에 직면하여 체크 인 폼 속성을 입력하여 수정했습니다.이 문제는 FormGroup이 초기화되지 않은 경우에 발생할 수 있습니다.

<form [formGroup]="loginForm" *ngIf="loginForm">
OR
<form [formGroup]="loginForm" *ngIf="this.loginForm">

초기화할 때까지 양식을 렌더링하지 않습니다.

저는 반응형을 사용하다가 비슷한 문제에 부딪혔습니다.제게 도움이 된 것은 제가 그에 대응하는 것을 확실히 하는 것이었습니다.FormGroup반에서이와 같은 것:

myFormGroup: FormGroup = this.builder.group({
    dob: ['', Validators.required]
});

동일한 오류가 발생하여 초기화를 이동한 후 해결하였습니다.formBuilder부터ngOnInit건설업자에게.

같은 오류가 발생하여 비동기 패턴을 제거했습니다.
오리지널 코드

async ngOnInit()
{
  this.id = await this.route.snapshot.paramMap.get('id');

작업코드

ngOnInit()
{
  this.id = this.route.snapshot.paramMap.get('id');

저는 바로 위의 @johannes Matevosyan 답변과 관련이 있다고 생각합니다.정말 이유는 모르겠지만 저를 위해 일하고 있습니다.

ArrayName 형식 대신 GroupName에서 지정한 경우 이 오류가 발생했습니다.

양식 배열인지 양식 그룹인지 올바르게 지정해야 합니다.

<div formGroupName="formInfo"/>

<div formArrayName="formInfo"/>

문제 코드:

HTML 파일에서:

<div [formGroup]="myFormm">
    <input formControlName="firstName">
</div>

TS 파일에서:

public myForm!: FormGroup;
public myFormm!: any;

constructor(private formBuilder: FormBuilder) { 
    this.myFormm = this.formBuilder.group({
        firstName: ['',Validators.required]
    });
}

솔루션 코드:

HTML과 TS 파일의 양식 이름이 동일한지 확인해주세요!!

HTML 파일에서:

<div [formGroup]="myForm">
    <input formControlName="firstName">
</div>

TS 파일에서:

public myForm!: FormGroup;

constructor(private formBuilder: FormBuilder) { 
    this.myForm = this.formBuilder.group({
        firstName: ['',Validators.required]
    });
} 

언급URL : https://stackoverflow.com/questions/38444778/formgroup-expects-a-formgroup-instance