ERROR 错误：formGroup 需要一个 FormGroup 实例（角度 5）
Posted
技术标签:
【中文标题】ERROR 错误：formGroup 需要一个 FormGroup 实例（角度 5）【英文标题】：ERROR Error: formGroup expects a FormGroup instance (ANGULAR 5) 【发布时间】：2018-08-03 18:38:56 【问题描述】：我在 Angular 5 中有一个这种基本形式，但是这被释放了以下错误。
这是错误：
EditVisitanteDialogComponent.html:10 ERROR 错误：formGroup 需要一个 FormGroup 实例。请传一个。
例子：
> > <div [formGroup]="myGroup"> <input formControlName="firstName"> > </div> > > In your class:this.myGroup = new FormGroup( firstName: new FormControl() );在 Function.ReactiveErrors.missingFormException (forms.js:6347) 在 FormGroupDirective._checkFormPresent (forms.js:6852) 在 FormGroupDirective.ngOnChanges (forms.js:6623) 在 checkAndUpdateDirectiveInline (core.js:12358) 在 checkAndUpdateNodeInline (core.js:13886) 在 checkAndUpdateNode (core.js:13829) 在 debugCheckAndUpdateNode (core.js:14722) 在 在 Object.eval 的 debugCheckDirectivesFn (core.js:14663) [as updateDirectives] (EditVisitanteDialogComponent.html:10) 在 Object.debugUpdateDirectives [as updateDirectives] (core.js:14648) View_EditVisitanteDialogComponent_0 @ EditVisitanteDialogComponent.html:10
component.html
<div class="dialog-content-wrapper">
<mat-toolbar matDialogTitle class="mat-accent m-0">
<mat-toolbar-row fxLayout="row" fxLayoutAlign="space-between center">
<span class="title dialog-title">Editar visitante</span>
<button mat-button class="mat-icon-button" (click)="dialogRef.close()" aria-label="Close dialog">
<mat-icon>close</mat-icon>
</button>
</mat-toolbar-row>
</mat-toolbar>
//esta linha que esta com o erro
<form name="form" [formGroup]="editForm" #f="ngForm">
<div mat-dialog-content class="m-0 p-24" fusePerfectScrollbar>
<div fxLayout="row" fxLayoutAlign="start start">
<mat-icon class="mr-12 mt-12">label_outline</mat-icon>
<mat-form-field class="mr-16">
<mat-select placeholder="Documento" formControlName="documento">
<mat-option value="option">Option</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Número" formControlName="numDocumento">
</mat-form-field>
</div>
<div fxLayout="row" fxLayoutAlign="start start">
<mat-icon class="mr-12 mt-12">account_circle</mat-icon>
<mat-form-field fxFlex>
<input formControlName="nome" placeholder="Nome do Visitante" matInput required>
</mat-form-field>
</div>
<div fxLayout="row" fxLayoutAlign="start start">
<mat-icon class="mr-12 mt-12">group</mat-icon>
<mat-form-field fxFlex>
<mat-select placeholder="Intenção" formControlName="motivoVisita">
<mat-option value="option">Familiar</mat-option>
<mat-option value="option">Particular</mat-option>
<mat-option value="option">Prestado de Serviço</mat-option>
</mat-select>
</mat-form-field>
</div>
<div fxLayout="row" fxLayoutAlign="start start">
<mat-icon class="mr-12 mt-12">lock_open</mat-icon>
<mat-form-field fxFlex>
<mat-select placeholder="Autorização" formControlName="tipoAutorizacao">
<mat-option value="option">Lorem ipsum...</mat-option>
</mat-select>
</mat-form-field>
</div>
<div fxLayout="row" fxLayoutAlign="start start">
<div fxLayout="column">
<p>Quando?</p>
<mat-radio-group formControlName="periodoAutorizacao">
<mat-radio-button value="hoje">Hoje</mat-radio-button>
<mat-radio-button value="semanal" class="ml-8">Semanal</mat-radio-button>
<mat-radio-button value="periodo" class="ml-8">Período</mat-radio-button>
</mat-radio-group>
<div id="periodo" fxLayout="row" fxLayoutAlign="space-evenly start">
<mat-form-field fxFlex="45">
<input matInput [matDatepicker]="picker" placeholder="De" formControlName="periodoDe">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
<mat-form-field fxFlex="45">
<input matInput [matDatepicker]="myDatepicker" placeholder="Até" formControlName="periodoAte">
<mat-datepicker-toggle matSuffix [for]="myDatepicker"></mat-datepicker-toggle>
<mat-datepicker #myDatepicker></mat-datepicker>
</mat-form-field>
</div>
<div id="semanal">
<mat-checkbox formControlName="diaSem1">Seg</mat-checkbox>
<mat-checkbox formControlName="diaSem2">Ter</mat-checkbox>
<mat-checkbox formControlName="diaSem3">Qua</mat-checkbox>
<mat-checkbox formControlName="diaSem4">Qui</mat-checkbox>
<mat-checkbox formControlName="diaSem5">Sex</mat-checkbox>
<mat-checkbox formControlName="diaSem6">Sáb</mat-checkbox>
<mat-checkbox formControlName="diaSem7">Dom</mat-checkbox>
</div>
</div>
</div>
<div>
<mat-form-field fxFlex>
<textarea matInput placeholder="Observação" formControlName="observacao"></textarea>
</mat-form-field>
</div>
</div>
<div mat-dialog-actions class="m-0 p-16" fxLayout="row" fxLayoutAlign="space-between center">
<button mat-raised-button class="save-button mat-accent" aria-label="SAVE">
SALVAR
</button>
<button mat-button class="mat-icon-button" aria-label="Delete" matTooltip="Excluir">
<mat-icon>delete</mat-icon>
</button>
</div>
</form>
</div>
component.ts
import Component, OnInit, ViewEncapsulation from '@angular/core';
import FormControl, FormGroup, FormBuilder, Validators from '@angular/forms';
@Component(
selector: 'editvisitante',
templateUrl: './editvisitante.component.html',
styleUrls: ['./editvisitante.component.scss'],
encapsulation: ViewEncapsulation.None
)
export class EditvisitanteComponent implements OnInit
editForm: FormGroup;
constructor(private formBuilder: FormBuilder)
ngOnInit()
this.editForm = this.formBuilder.group(
documento: ["", Validators.required],
numDocumento: ["", Validators.required],
nome: ["", Validators.required],
motivoVisita: ["", Validators.required],
tipoAutorizacao: ["", Validators.required],
periodoAutorizacao: ["", Validators.required],
periodoDe: [""],
periodoAte: [""],
diaSem1: [""],
diaSem2: [""],
diaSem3: [""],
diaSem4: [""],
diaSem5: [""],
diaSem6: [""],
diaSem7: [""],
observacao: ["", Validators.required],
);
【问题讨论】：
Angular 2: formGroup expects a FormGroup instance. Please pass one in的可能重复 【参考方案1】：如果这种情况发生在新版本的 Angular 中，这可能是导致此问题的原因 -> 如果您的 ngOnInit 是异步方法，您必须先初始化表单组，然后再等待任何其他异步方法或一些异步代码
async ngOnInit()
this.signinForm = new FormGroup(
email: new FormControl("", [Validators.required, Validators.email]),
password: new FormControl("", [
Validators.required,
Validators.pattern("^[a-zA-Z0-9]*"),
]),
);
///... other async code
【讨论】：
【参考方案2】：我也遇到过这个问题。似乎由于某种原因，HTML 在 FormGroup 之前被处理，即使它在构造函数或 ngOnInit 中。解决我的错误的方法是将其包装在 TimeOut 中，尽管我不确定这是否是最好或最干净的解决方案。
setTimeout(() =>
this.editForm = this.formBuilder.group(
documento: ["", Validators.required],
numDocumento: ["", Validators.required],
nome: ["", Validators.required],
motivoVisita: ["", Validators.required],
tipoAutorizacao: ["", Validators.required],
periodoAutorizacao: ["", Validators.required],
periodoDe: [""],
periodoAte: [""],
diaSem1: [""],
diaSem2: [""],
diaSem3: [""],
diaSem4: [""],
diaSem5: [""],
diaSem6: [""],
diaSem7: [""],
observacao: ["", Validators.required],
);
), 1);
【讨论】：
以上是关于ERROR 错误：formGroup 需要一个 FormGroup 实例（角度 5）的主要内容，如果未能解决你的问题，请参考以下文章
错误：formControlName 必须与父 formGroup 指令一起使用。您需要添加一个 formGroup 指令 - Angular 反应式表单
出现错误：formGroup 需要一个 FormGroup 实例。请传入一个
formControlName 必须与父 formGroup 指令一起使用