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)
我很喜欢que dodo estar mal。米科迪戈·埃斯塔·德拉西吉恩特·曼纳拉
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)
});
}
}
}
<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">×</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>
框架是一种有角度的，有目的的，有意图的积分器，它具有反应性。
发生错误的情况：
错误错误：formGroup需要一个FormGroup实例。请传递一个。
答案 0 :(得分：-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>