I am currently trying to update data stored with MongoDB via my form (Angular).
However, I have an error in my browser console:
ERROR Error: NG01002: Must supply a value for form control with name:
‘name’
HTML :
<div class="row justify-content-center mt-5">
<div class="col-md-4">
<h1>Modification de vos informations.</h1>
<form [formGroup]="updateForm" (ngSubmit)="onUpdate()">
<div class="form-group">
<label>Nom</label>
<input class="form-control" type="text" formControlName="nom" required>
</div>
<div class="form-group">
<label>Prénom</label>
<input class="form-control" type="text" formControlName="prenom" required>
</div>
<div class="form-group">
<label>Email</label>
<input class="form-control" type="text" formControlName="email" required>
</div>
<div class="form-group">
<label>Mot de passe</label>
<input class="form-control" type="text" formControlName="password" required>
</div>
<div class="form-group">
<label>Statut</label>
<input class="form-control" type="text" formControlName="statut" required>
</div>
<div class="form-group">
<label>NombreUC</label>
<input class="form-control" type="text" formControlName="nombreUC" required>
</div>
<div class="form-group">
<button class="btn btn-primary btn-block" type="submit">Update</button>
</div>
</form>
</div>
</div>
TS :
import { Component, OnInit, NgZone } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { CrudService } from './../../../service/crud.service';
import { FormGroup, FormBuilder } from "@angular/forms";
@Component({
selector: 'app-edit-user',
templateUrl: './edit-user.component.html',
styleUrls: ['./edit-user.component.css']
})
export class EditUserComponent implements OnInit {
getId: any;
updateForm: FormGroup;
constructor(
public formBuilder: FormBuilder,
private router: Router,
private ngZone: NgZone,
private activatedRoute: ActivatedRoute,
private crudService: CrudService
) {
this.getId = this.activatedRoute.snapshot.paramMap.get('id');
this.crudService.GetUser(this.getId).subscribe(res => {
this.updateForm.setValue({
nom: res['nom'],
prenom: res['prenom'],
email: res['email'],
password: res['password'],
statut: res['statut'],
nombreUC: res['nombreUC']
});
});
this.updateForm = this.formBuilder.group({
nom: [''],
prenom: [''],
email: [''],
password: [''],
statut: [''],
nombreUC: ['']
})
}
ngOnInit() { }
onUpdate(): any {
this.crudService.updateUser(this.getId, this.updateForm.value)
.subscribe(() => {
console.log('Updated!')
this.ngZone.run(() => this.router.navigateByUrl('/admin/list-users'))
}, (err) => {
console.log(err);
});
}
}
I’m new to this so I’m sorry if I’m not clear enough.. but I haven’t found a solution yet.