錯誤錯誤：formGroup需要一個FormGroup實例。 請傳遞一個

Question

ERROR Error: formGroup expects a FormGroup instance. Please pass one in.

Example: 

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

In your class:

this.myGroup = new FormGroup({
firstName: new FormControl()
});
at Function.push../node_modules/@angular/forms/fesm5/forms.js.ReactiveErrors.missingFormException (forms.js:1181)
at FormGroupDirective.push../node_modules/@angular/forms/fesm5/forms.js.FormGroupDirective._checkFormPresent (forms.js:4685)
at FormGroupDirective.push../node_modules/@angular/forms/fesm5/forms.js.FormGroupDirective.ngOnChanges (forms.js:4595)
at checkAndUpdateDirectiveInline (core.js:18616)
at checkAndUpdateNodeInline (core.js:19884)
at checkAndUpdateNode (core.js:19846)
at debugCheckAndUpdateNode (core.js:20480)
at debugCheckDirectivesFn (core.js:20440)
at Object.eval [as updateDirectives] (GestionarUsuarioComponent.html:117)
at Object.debugUpdateDirectives [as updateDirectives] (core.js:20432)

我很喜歡待辦事項，請到Postarria estar mal。 米科迪戈·埃斯塔·德拉西吉恩特·曼納拉

＃Usuario.ts

import { Component, OnInit, Input } from '@angular/core';
import { NgForm, FormBuilder, FormGroup, ReactiveFormsModule, FormControl 
} from '@angular/forms';
import { User } from '../../interfaces/user.interface';
import { Persona } from "../../interfaces/persona.interface";
import { AppUserService } from "../../services/app-user.service";
import { AppPersonaService } from "../../services/app-persona.service";

@Component({
selector: 'app-gestionar-usuario',
 templateUrl: './gestionar-usuario.component.html',
  styleUrls: ['./gestionar-usuario.component.css']
 })
export class GestionarUsuarioComponent implements OnInit {

//FormBuilder
 public formPersona:FormGroup;
public userPersona: Persona[];

 constructor( private _appUserService: AppUserService,
          private _appPersonaService: AppPersonaService,
          private _formBuilder: FormBuilder) {
 this.getUsers();
 }



//Gestionar Usuarios
getUsers() {
this._appUserService.getUsers().subscribe((users: Persona[]) => 
this.userPersona = users);
console.log(this.userPersona);
}



 //Buscar al estudiante para editar
 buscarEstudianteEditar(idPersona:string){
 for(let estudiante of this.userPersona){

  if (estudiante.idPersona == idPersona) {
     console.log("idPersonas: ", estudiante.idPersona )
    this.formPersona = new FormGroup({
      editPrimerNombre: new FormControl(estudiante.primerNombre),
      editSegundoNombre: new FormControl(estudiante.segundoNombre),
      editPrimerApellido : new FormControl(estudiante.primerApellido),
      editSegundoApellido : new FormControl(estudiante.segundoApellido),
      editCarrera : new FormControl(estudiante.carrera),
      editSemestre : new FormControl(estudiante.semestre),
      editNacionalidad : new FormControl(estudiante.nacionalidad),
      editFechaNacimiento : new FormControl(estudiante.fechaNacimiento),
      editDireccion : new FormControl(estudiante.direccion),
      editCi : new FormControl(estudiante.ci),
      editCelular : new FormControl(estudiante.celular)
    });
      }
     }
    }

＃Usuario.html

 <div class="modal fade" id="modal-editar">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" 
 aria-label="Close">
          <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Editar</h4>
            </div>
            <div class="modal-body">
                <form [formGroup]="formPersona"  
  name="formularioEditPersona" class="form-horizontal">

                    <div class="row row-editar">
                        <div class="col-md-12">
                            <figure class="figure text-center">
                                <img src="../../../assets/img/avatar.png" 
  class="figure-img img-fluid rounded img-thumbnail" alt="A generic 
  square placeholder image with rounded corners in a figure.">
                                <figcaption class="figure-caption text- 
   center">Fotografia para la identifiación</figcaption>
                                <button type="button" class="btn btn- 
    default btn-subir-foto">
                          <i class="fa fa-upload"></i> Subir 
   fotografía</button>
                            </figure>
                            <br>
                            <div class="form-group">
                                <label for="inputName" class="col-sm-3 
     control-label">Primer nombre</label>

                                <div class="col-sm-9">
                                    <input 
    [(ngModel)]="editpersona.primerNombre" name="editPrimerNombre" 
  formControlName="editPrimerNombre" type="text" class="form-control" 
     id="pNombre" placeholder="">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="inputName" class="col-sm-3 
  control-label">Segundo nombre</label>

                                <div class="col-sm-9">
                                    <input 
   [(ngModel)]="editpersona.segundoNombre" name="editSegundoNombre" 
   formControlName="editSegundoNombre" type="text" class="form-control" 
 id="pNombre" placeholder="">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="inputName" class="col-sm-3 
 control-label">Primer apellido</label>

                                <div class="col-sm-9">
                                    <input 
  [(ngModel)]="editpersona.primerApellido" name="editPrimerApellido" 
  formControlName="editPrimerApellido" type="text" class="form-control" 
  id="pApellido" placeholder="">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="inputExperience" class="col- 
 sm-3 control-label">Segundo apellido</label>

                                <div class="col-sm-9">
                                    <input 
  [(ngModel)]="editpersona.segundoApellido" name="editSegundoApellido" 
  formControlName="editSegundoApellido" type="text" class="form-control" 
   id="sApellido" placeholder="">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="inputExperience" class="col- 
  sm-3 control-label">Carrera</label>

                                <div class="col-sm-9">
                                    <input 
   [(ngModel)]="editpersona.carrera" name="editCarrera" 
   formControlName="editCarrera" type="text" class="form-control" 
    id="carrera" placeholder="">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="inputExperience" class="col- 
   sm-3 control-label">Semestre</label>

                                <div class="col-sm-9">
                                    <input 
  [(ngModel)]="editpersona.semestre" name="editSemestre" 
  formControlName="editSemestre"  type="text" class="form-control" 
  id="semestre" placeholder="">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="inputEmail" class="col-sm-3 
  control-label">Nacionalidad</label>
                                <div class="col-sm-9">
                                    <input 
  [(ngModel)]="editpersona.nacionalidad" name="editNacionalidad" 
  formControlName="editNacionalidad"  type="text" class="form-control" 
  id="editnacionalidad" placeholder="">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="inputSkills" class="col-sm-3 
   control-label">Fecha de nacimiento</label>

                                <div class="col-sm-9">
                                    <input 
  [(ngModel)]="editpersona.fechaNacimiento" name="editFechaNacimiento" 
  formControlName="editFechaNacimiento"  type="text" class="form-control 
  pull-right" id="editfechaNacimiento">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="inputSkills" class="col-sm-3 
    control-label">Dirección</label>

                                <div class="col-sm-9">
                                    <input 
 [(ngModel)]="editpersona.direccion" name="editDireccion" 
 formControlName="editDireccion" type="text" class="form-control" 
 id="editdireccion" placeholder="">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="inputSkills" class="col-sm-3 
  control-label">C.I.</label>

                                <div class="col-sm-9">
                                    <input [(ngModel)]="editpersona.ci" 
 name="editCi" formControlName="editCi" type="text" class="form-control" 
 id="editci" placeholder="">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="inputSkills" class="col-sm-3 
 control-label">Celular</label>

                                <div class="col-sm-9">
                                    <input 
  [(ngModel)]="editpersona.celular" name="editCelular" 
  formControlName="editCelular" type="text" class="form-control" 
  id="editcelular" placeholder="">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12 text-center">

                            <button (click)="mensajeSuccess()" 
   type="submit" name="button" class="btn btn-primary margin" data- 
 dismiss="modal">
                        <i class="fa fa-refresh"></i> Actualizar
                      </button>
                        </div>

                    </div>
                </form>
            </div>
         </div>
      </div>
  </div>

Descripción

框架是一種有角度的，有目的的，有意圖的積分器，可以用於反應方程式。

錯誤提示：

錯誤錯誤：formGroup需要一個FormGroup實例。 請傳遞一個。

Answer 1

follow this code
demo.html
<form [formGroup]="registerForm" (ngSubmit)="onSubmit()">

                    <div class="form-group">
                        <label>Email</label>
                        <input type="text" formControlName="email" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.email.errors }" />
                        <div *ngIf="submitted && f.email.errors" class="invalid-feedback">
                            <div *ngIf="f.email.errors.required">Email is required</div>
                            <div *ngIf="f.email.errors.email">Email must be a valid email address</div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label>Password</label>
                        <input type="password" formControlName="password" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.password.errors }" />
                        <div *ngIf="submitted && f.password.errors" class="invalid-feedback">
                            <div *ngIf="f.password.errors.required">Password is required</div>
                            <div *ngIf="f.password.errors.minlength">Password must be at least 6 characters</div>
                        </div>
                    </div>
                </form>
-------------------------------------------------------
demo.js

<form [formGroup]="registerForm" (ngSubmit)="onSubmit()">

<div class="form-group">
<label>Email</label>
<input type="text" formControlName="email" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.email.errors }" />
<div *ngIf="submitted && f.email.errors" class="invalid-feedback">
<div *ngIf="f.email.errors.required">Email is required</div>
<div *ngIf="f.email.errors.email">Email must be a valid email address</div>
</div>
</div>
<div class="form-group">
<label>Password</label>
<input type="password" formControlName="password" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.password.errors }" />
<div *ngIf="submitted && f.password.errors" class="invalid-feedback">
<div *ngIf="f.password.errors.required">Password is required</div>
<div *ngIf="f.password.errors.minlength">Password must be at least 6 characters</div>
</div>
</div>
</form>