There is a basic form on the HTML page that acts as an "Add-Edit" form. When opening the page with an ID, all inputs should be automatically filled with ObjectId values. If the page is opened without an ID, the inputs should be manually completed before adding the object to the database. The issue arises when trying to read or write values to the input fields using:
this.form.get["inputName"].setValue(value);
The console displays the error:
Cannot read property 'setValue' of undefined
Below is the HTML code snippet:
<form [formGroup]="form" (ngSubmit)="save()" #formDir="ngForm" novalidate>
<div class="form-group row">
<mat-form-field>
<input matInput [matDatepicker]="picker" placeholder="Choose a date" (dateInput)="addEvent($event)" (dateChange)="addEvent($event)" formControlName="picker">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
<div class="col-md-8">
<label class=" control-label col-md-3">cost</label>
<input class="form-control" type="text" formControlName="cost">
</div>
<label for="vehicles">Veicoli</label>
<select formControlName="vehicleList" id="vehicleList">
<option *ngFor="let vehicle of vehicles; let i = index" [value]="vehicles[i].id">
{{vehicles[i].plate}}
</option>
</select>
<label class=" control-label col-md-3">startKm</label>
<div class="col-md-8">
<input class="form-control" type="text" formControlName="startKm">
</div>
<label class=" control-label col-md-3">endKm</label>
<div class="col-md-8">
<input class="form-control" type="text" formControlName="endKm">
</div>
<label class=" control-label col-md-3">liter</label>
<div class="col-md-8">
<input class="form-control" type="text" formControlName="liter">
</div>
<label class=" control-label col-md-3">average</label>
<div class="col-md-8">
<input class="form-control" type="text" formControlName="average">
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-success float-right">Save</button>
<button class="btn btn-secondary float-left" (click)="cancel()">Cancel</button>
</div>
</form>
This section corresponds to the .ts file:
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
import { Router, ActivatedRoute } from '@angular/router';
import { FuelService } from '../services/fuel.service';
import { VehiclesService } from '../services/vehicles.service';
import { Fuel } from '../models/fuel';
import { Vehicle } from '../models/vehicle';
import { of } from 'rxjs';
@Component({
selector: 'app-fuel-add-edit',
templateUrl: './fuel-add-edit.component.html',
styleUrls: ['./fuel-add-edit.component.css']
})
export class FuelAddEditComponent implements OnInit {
form: FormGroup;
plateCtrl: FormControl;
actionType: string;
fuelId: number;
errorMessage: any;
existingFuel: Fuel;
vehicles: Vehicle[];
dataSelected: Date;
constructor(private fuelService: FuelService, private vehicleService: VehiclesService, private formBuilder: FormBuilder, private avRoute: ActivatedRoute, private router: Router) {
const idParam = 'id';
this.actionType = 'Add';
if (this.avRoute.snapshot.params[idParam]) {
this.fuelId = this.avRoute.snapshot.params[idParam];
}
this.form = this.formBuilder.group(
{
picker: [''],
cost: ['', [Validators.required]],
vehicleList: [''],
startKm: ['', [Validators.required]],
endKm: ['', [Validators.required]],
liter: ['', [Validators.required]],
average: ['', [Validators.required]]
}
)
of(this.vehicleService.getVehicles().subscribe(data=> (
this.vehicles = data
)))
}
ngOnInit() {
if (this.fuelId > 0) {
console.log(this.form);
this.actionType = "Edit";
this.fuelService.getFuel(this.fuelId)
.subscribe(data => (
this.existingFuel = data,
this.form.get["picker"].setValue(data.date),
this.form.get["cost"].setValue(data.cost),
this.form.get["vehicleList"].setValue(data.vehicle.id),
this.form.get["startKm"].setValue(data.startKm),
this.form.get["endKm"].setValue(data.endKm),
this.form.get["liter"].setValue(data.liter),
this.form.get["average"].setValue(data.average)
));
}
}
get picker() { return this.form.get("picker"); }
get cost() { return this.form.get("cost"); }
get vehicleList() { return this.form.get("vehicleList"); }
get startKm() { return this.form.get("startKm"); }
get endKm() { return this.form.get("endKm"); }
get liter() { return this.form.get("liter"); }
get average() { return this.form.get("average"); }
}