Edit Vehicle

[web-dave]

• Generate a vehicle-edit component
• Add a edit route
• Import FormsModule into FleetModule
• Bind vehicle to a template driven form
• extend the service to save edited vehicle

[web-dave]

generate

  ng g c fleet/vehicle-edit

[web-dave]

fleet-routing.module.ts

    {
      path: ':id/edit',
      component: VehicleEditComponent
    }

[web-dave]

fleet.module.ts

  import { FormsModule } from '@angular/forms';

  import ...

  @NgModule({
  imports: [
    CommonModule,
    FleetRoutingModule,
    FormsModule
  ],
  exports: [],
  declarations: [...],
  providers: [...]
  })
  export class FleetModule { }

[web-dave]

vehicle-edit.component.html

  <form *ngIf="vehicle" #form="ngForm" (ngSubmit)="saveVehicle()">
    <div class="form-group">
        <label for="make">Make</label>
        <input 
          type="text" 
          id="make" 
          name="make" 
          required minlength="6" 
          [(ngModel)]="vehicle.make" 
          #make="ngModel">
        <div [hidden]="!make.errors?.required || make.pristine">Enter a Make</div>
    </div>
      ...
    <div>
      <button type="submit" [disabled]="!form.valid">Save</button>
      <a class="btn btn-default btn-sm" [routerLink]="['..']">X</a>
    </div>

  </form>

[web-dave]

vehicle-edit.component.ts

  saveVehicle() {
    this.service.updateVehicle(this.vehicle)
      .subscribe(() => {
        this.router.navigate(['..'],{relativeTo:this.route});
      });
  }

[web-dave]

fleet.service.ts

  updateVehicle(vehicle: IVehicle): Observable<IVehicle> {
    const url = `${this.restRoot}/${vehicle.id}`;
    return this.http.put<IVehicle>(url, vehicle);
  }

[web-dave]

NEXT