La aplicación que estoy haciendo me falla aquí, les agradecería que me ayudasen ya que llevo dos semanas atascado, espero disculpen si son errores evidentes ya que tengo poca experiencia con esto
gusuarios.component.html pagina
<form method="POST" [formGroup]="form" (ngSubmit)="enviar();" >
<div formGroupName="nombre">
<label for="nombre">Nombre</label>
<input
formControlName="nombre"
placeholder="Nombre:"
type="text"
values="usuario.nombre"
name="nombre"/>
</div>
<div formGroupName="id">
<input
type="hidden"
formControlName="id"
values="usuario.id"
name="id"
value=0 />
</div>
<div formGroupName="apellidos">
<label for="apellidos">Apellidos</label>
<input
placeholder="Apellidos:"
type="text"
values="usuario.apellidos"
name="apellidos"
formControlName="apellidos"
/>
</div>
<div formGroupName="email">
<label for="email">Email(Login)</label>
<input
placeholder="Email:"
type="text"
values="usuario.email"
name="email"
formControlName="email"
/>
</div>
<div formGroupName="administrador">
<label for="administrador">Administrador</label>
<input
type="checkbox"
id="administrador"
name="administrador"
values="usuario.administrador"
formControlName="administrador"
/>
</div>
<hr />
<a class="btn btn-default btn-block" (click)="enviar()">Enviar!</a>
<a class="btn btn-default btn-block" (click)="volver()">Cancelar</a>
</form>
gusuarios.component.ts Controlador
import { UsuariosService } from '../../services/usuarios.service';
import { Router } from '@angular/router';
import { Usuario } from '../../interfaces/usuario';
import {Component, ElementRef, ViewChild, OnInit } from '@angular/core';
import {FormBuilder, FormGroup, Validators} from "@angular/forms";
@Component({
selector: 'app-gusuarios',
templateUrl: './gusuarios.component.html',
styleUrls: ['./gusuarios.component.css']
})
export class GUsuariosComponent implements OnInit {
title = 'Gestión de usuarios';
form: FormGroup;
static readonly clase:string = 'GUsuariosComponent';
submitted = false;
usuarios:any = [];
usuario:Usuario = new Usuario();
error:string = '';
constructor(private usuariosService:UsuariosService, private router:Router,private fb: FormBuilder){
console.log(GUsuariosComponent.clase+".constructor. entra");
usuariosService.getUsuarios(this);
console.log(GUsuariosComponent.clase+".constructor. sale");
};
ngOnInit() {
console.log(GUsuariosComponent.clase+".ngOnInit. entra");
this.form= this.fb.group({
nombre: ['', Validators.required],
id:[0],
apellidos: [''],
email: ['', [Validators.required, Validators.email]],
administrador: [0, Validators.required]
});
console.log(GUsuariosComponent.clase+".ngOnInit. sale");
}
modificar(index:number){
this.usuario=this.usuarios[index];
}
eliminar(index:number){
this.usuariosService.eliminarUsuario(this, this.usuarios[index].id, index);
}
enviar(){
this.submitted = true;
// stop here if form is invalid
if (this.form.invalid) {
return;
}
this.usuariosService.guardarUsuario(this, document);
}
volver(){
this.router.navigate(['admin']);
}
// convenience getter for easy access to form fields
get f() { return this.form.controls; }
}
Me muestra diferentes errores, ¿Me pueden ayudar?
Errores ................................................................................. Error1 .................................................................................
**ERROR Error: Cannot find control with path: 'nombre -> nombre'
at _throwError (forms.js:2144)
at setUpControl (forms.js:2052)
at FormGroupDirective.push../node_modules/@angular/forms/fesm5/forms.js.FormGroupDirective.addControl (forms.js:5281)
at FormControlName.push../node_modules/@angular/forms/fesm5/forms.js.FormControlName._setUpControl (forms.js:5882)
at FormControlName.push../node_modules/@angular/forms/fesm5/forms.js.FormControlName.ngOnChanges (forms.js:5803)
at checkAndUpdateDirectiveInline (core.js:22095)
at checkAndUpdateNodeInline (core.js:23363)
at checkAndUpdateNode (core.js:23325)
at debugCheckAndUpdateNode (core.js:23959)
at debugCheckDirectivesFn (core.js:23919)**
................................................................................. Error2 .................................................................................
GUsuariosComponent.html:29 ERROR Error: Cannot find control with path: 'id -> id'
at _throwError (forms.js:2144)
at setUpControl (forms.js:2052)
at FormGroupDirective.push../node_modules/@angular/forms/fesm5/forms.js.FormGroupDirective.addControl (forms.js:5281)
at FormControlName.push../node_modules/@angular/forms/fesm5/forms.js.FormControlName._setUpControl (forms.js:5882)
at FormControlName.push../node_modules/@angular/forms/fesm5/forms.js.FormControlName.ngOnChanges (forms.js:5803)
at checkAndUpdateDirectiveInline (core.js:22095)
at checkAndUpdateNodeInline (core.js:23363)
at checkAndUpdateNode (core.js:23325)
at debugCheckAndUpdateNode (core.js:23959)
at debugCheckDirectivesFn (core.js:23919)
.................................................................................
[formControlName]="nombre"
,[formGroupName]="form"
, debes quitarle las llaves, quedaría así:formControlName="nombre"
,formGroupName="form"
. Prueba con ello.