Question

我在Angular 5中有一个这个基本形式，但是这会释放以下错误。

这是错误：


EditVisitanteDialogComponent.html：10错误错误：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）at     FormGroupDirective._checkFormPresent（forms.js：6852）at     FormGroupDirective.ngOnChanges（forms.js：6623）at     checkAndUpdateDirectiveInline（core.js：12358）at     checkAndUpdateNode上的checkAndUpdateNodeInline（core.js：13886）     （core.js：13829）在debugCheckAndUpdateNode（core.js：14722）处     在Object.eval [as。的debugCheckDirectivesFn（core.js：14663）     updateDirectives]（EditVisitanteDialogComponent.html：10）at     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],
    });

  }

}

Answer 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

}

Answer 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);

错误错误：formGroup需要一个FormGroup实例（ANGULAR 5）

2 个答案: