Boa tarde, eu to fazendo um crud com o Angular 13, ele faz todas as funções de um crud, menos a de atualizar, quando clico no botao que chama a função pra atualizar, ele da esse erro: ERROR TypeError: this.veiculo is undefined
.
Estou fazendo o front pelo Angular 13 e usando uma api feita em Java com SpringBoot.
Segue o codigo:
veiculo-atualiza.component.ts
import { Component, OnInit } from '@angular/core';
import {
FormBuilder,
FormControl,
FormGroup,
Validators,
} from '@angular/forms';
import { MatDialogRef } from '@angular/material/dialog';
import { MatSnackBar } from '@angular/material/snack-bar';
import { Veiculos } from '../models/veiculos';
import { VeiculoService } from '../services/veiculo.service';
import { VeiculoAddComponent } from '../veiculo-add/veiculo-add.component';
@Component({
selector: 'app-veiculo-atualiza',
templateUrl: './veiculo-atualiza.component.html',
styleUrls: ['./veiculo-atualiza.component.css'],
})
export class VeiculoAtualizaComponent implements OnInit {
public veiculoForm!: FormGroup;
veiculo!: Veiculos;
constructor(
private fBuilder: FormBuilder,
private dialogRef: MatDialogRef<VeiculoAddComponent>,
private service: VeiculoService,
private snackBar: MatSnackBar
) {}
ngOnInit(): void {
this.veiculoForm = this.fBuilder.group({
placaOriginal: new FormControl(
this.veiculoForm ? this.veiculoForm.get('veiculo.placaOriginal') : '',
[Validators.required, Validators.minLength(7)]
),
placaFria: new FormControl(
this.veiculoForm ? this.veiculoForm.get('placaFria') : '',
[Validators.required, Validators.minLength(7)]
),
modelo: new FormControl(
this.veiculoForm ? this.veiculoForm.get('modelo') : '',
Validators.required
),
marca: new FormControl(
this.veiculoForm ? this.veiculoForm.get('marca') : '',
Validators.required
),
ano: new FormControl(
this.veiculoForm ? this.veiculoForm.get('ano') : '',
Validators.required
),
numeroProcesso: new FormControl(
this.veiculoForm ? this.veiculoForm.get('numeroProcesso') : '',
Validators.required
)
});
}
onCancel(): void {
this.dialogRef.close();
}
onUpdate(): void {
this.service.update(this.veiculoForm.value, this.veiculo.id).subscribe(
() => this.onSuccess(),
() => this.onError(),
() => window.location.reload()
);
this.dialogRef.close();
}
private onSuccess() {
this.snackBar.open('Veículo atualizado com sucesso!', '', {
duration: 3500,
});
}
private onError() {
this.snackBar.open('Erro ao atualizar veículo!', '', { duration: 3500 });
}
}
veiculo-atualiza.component.html
<h1 mat-dialog-title>Atualizar Veiculo</h1>
<div mat-dialog-content>
<form (ngSubmit)="onUpdate()" class="example-form" [formGroup]="veiculoForm" #formDir="ngForm">
<mat-form-field class="example-full-form">
<mat-label>Placa Original</mat-label>
<input matInput formControlName="placaOriginal" name="placaOriginal" maxlength="7" minLength="7" />
</mat-form-field>
<mat-form-field class="example-full-form">
<mat-label>Placa Fria</mat-label>
<input matInput formControlName="placaFria" name="placaFria" />
<mat-form-field class="example-full-form">
<mat-label>Modelo</mat-label>
<input matInput formControlName="modelo" name="modelo" />
</mat-form-field>
<mat-form-field class="example-full-form">
<mat-label>Marca</mat-label>
<input matInput formControlName="marca" name="marca" />
</mat-form-field>
<mat-form-field class="example-full-form">
<mat-label>Ano</mat-label>
<input matInput formControlName="ano" name="ano" />
</mat-form-field>
<mat-form-field class="example-full-form">
<mat-label>Numero do Processo</mat-label>
<input matInput formControlName="numeroProcesso" name="numeroProcesso" />
</mat-form-field>
<div mat-dialog-actions>
<button mat-raised-button class="button btn btn-primary">
Atualizar
</button>
<button mat-raised-button class="button btn btn-warning" (click)="onCancel()">
Cancelar
</button>
</div>
</form>
</div>
veiculo.setvice.ts
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { Veiculos } from '../models/veiculos';
@Injectable({
providedIn: 'root',
})
export class VeiculoService {
private readonly API = 'http://localhost:8080/api/veiculos';
constructor(private httpClient: HttpClient) {}
list() {
return this.httpClient.get<Veiculos[]>(this.API);
}
save(veiculo: Veiculos) {
return this.httpClient.post<Veiculos[]>(this.API, veiculo);
}
delete(id: number): Observable<any> {
return this.httpClient.delete<any>(`${this.API}/${id}`);
}
update(veiculo: Veiculos, id: number): Observable<Veiculos[]> {
return this.httpClient.put<Veiculos[]>(`${this.API}/${id}`, veiculo);
}
}
Agradeço desde já