Estou tentando editar um dispositivo dentro do meu CRUD,utilizando Angular 9 e Realtime Database do Firebase, ao clicar no botão "Editar", sou redirecionado para outra página para que eu possa alterar os valores daquele objeto, porém estou recebendo o seguinte erro do console ERROR Error: Must supply a value for form control with name: 'key'.
Sei que preciso passar o valor da key para o formulário, porém não estou conseguindo o fazer e não tenho mais ideia de como prosseguir, estou ficando confuso
Segue os códigos
edit.html
<!-- Device form -->
<div class="inner-wrapper">
<form [formGroup]="editDeviceForm" (ngSubmit)="updateDevice()" novalidate>
<mat-card>
<div class="controlers-wrapper">
<!-- Device no. -->
<mat-form-field class="example-full-width">
<input matInput placeholder="Dispositivo No." formControlName="key">
<mat-error *ngIf="handleError('key', 'required')">
You must provide a <strong>device number</strong>
</mat-error>
</mat-form-field>
<!-- Device name -->
<mat-form-field class="example-full-width">
<input matInput placeholder="Nome" formControlName="name">
<mat-error *ngIf="handleError('name', 'required')">
Você deve fornecer um <strong>nome</strong>
</mat-error>
</mat-form-field>
<!-- Device description -->
<mat-form-field class="example-full-width">
<input matInput placeholder="Descrição" formControlName="description">
</mat-form-field>
<!-- Device activity -->
<div class="misc-bottom-padding">
<mat-label>Atividade: </mat-label>
<mat-radio-group aria-label="Select an option" formControlName="active">
<mat-radio-button value="Ativo">Ativo</mat-radio-button>
<mat-radio-button value="Inativo">Inativo</mat-radio-button>
</mat-radio-group>
</div>
<!-- Route -->
<mat-form-field class="example-full-width">
<input matInput placeholder="Rota" formControlName="route">
</mat-form-field>
<div class="full-wrapper button-wrapper">
<div class="button-wrapper">
<button mat-raised-button color="primary">Atualizar</button>
<button mat-raised-button type="button" (click)="goBack()">Voltar</button>
</div>
</div>
</div>
</mat-card>
edit.ts
visible = true;
selectable = true;
removable = true;
addOnBlur = true;
editDeviceForm: FormGroup;
constructor(
public fb: FormBuilder,
private location: Location,
private db: AngularFireDatabase,
private deviceService: DeviceService,
private actRoute: ActivatedRoute,
private router: Router
) {
var id = this.actRoute.snapshot.paramMap.get('id');
this.deviceService.GetDevice(id).valueChanges().subscribe(data => {
this.editDeviceForm.setValue(data);
})
}
/* Update form */
updateDeviceForm() {
this.editDeviceForm = this.fb.group({
key: ['', [Validators.required]],
description: [''],
active: ['Ativo', [Validators.required]],
location: [],
name: ['', [Validators.required]],
route: ['']
})
}
/* Get errors */
public handleError = (controlName: string, errorName: string) => {
return this.editDeviceForm.controls[controlName].hasError(errorName);
}
/* Go to previous page */
goBack() {
this.location.back();
}
/* Submit device */
updateDevice() {
var id = this.actRoute.snapshot.paramMap.get('id');
if (window.confirm('Tem certeza que quer atualizar?')) {
this.deviceService.UpdateDevice(id, this.editDeviceForm.value);
this.router.navigate(['devices']);
}
}
ngOnInit() {
this.updateDeviceForm();
}
device-service
devicesRef: AngularFireList<any>;
deviceRef: AngularFireObject<any>;
constructor(private db: AngularFireDatabase, private routeService: RouteService) { }
/* Create device */
AddDevice(device: Device) {
this.devicesRef.push({
key: device.key,
description: device.description,
active: device.active,
name: device.name,
route: device.route
})
.catch(error => {
this.errorMgmt(error);
})
}
/* Get device */
GetDevice(id: string) {
this.deviceRef = this.db.object('/busao/devices/' + id);
return this.deviceRef;
}
/* Get device list */
GetDeviceList() {
this.devicesRef = this.db.list('/busao/devices');
return this.devicesRef;
}
/* Update device */
UpdateDevice(id, device: Device) {
this.deviceRef.update({
key: device.key,
description: device.description,
active: device.active,
name: device.name,
route: device.route
})
.catch(error => {
this.errorMgmt(error);
})
}
/* Delete device */
DeleteDevice(id: string) {
this.deviceRef = this.db.object('/busao/devices/' + id);
this.deviceRef.remove()
.catch(error => {
this.errorMgmt(error);
})
}
// Error management
private errorMgmt(error) {
console.log(error)
}
Caso precisem de mais alguma informação, só falar nos comentários, fico muito grato aos que puderem ajudar.
editDeviceForm: FormGroup
esteja sendo instanciado depois dothis.editDeviceForm.setValue(data);
que está no seu construtor. Se você tentar utilizar osetValue
antes do mesmo ser instancia ocorreria um erro.