title: Angular - ERROR TypeError: Cannot read properties of undefined (reading 'vehicle_image')
body: <p>In my Angular-12 project I am trying to edit data that has image. The code is shown below:</p>
  <p>interface:</p>
  <pre><code>export class VehicleResponse {
    results!: { vehicle: IVehicle };
  }
  
  export interface IVehicle {
    id?: number;
    registration_number: string;
    vehicle_image?: any;
  
  }
  </code></pre>
  <p>service:</p>
  <pre><code>    getVehicleById(id: number): Observable&lt;VehicleResponse&gt; {
        return this.http.get&lt;VehicleResponse&gt;(this.api.baseURL + 'vehicles/fetchbyid/' + id, this.httpOptions);
      }
  
      public updateVehicle(id: number, data: any) {
        return this.http.post(this.api.baseURL + 'vehicles/update/' + id, data, this.httpOptions1);
      }
  </code></pre>
  <p>component</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import {
    IVehicle,
    VehicleResponse
  } from 'src/app/models/vehicle.model';
  import {
    VehicleService
  } from 'src/app/services/vehicle.service';
  
  editForm!: FormGroup;
  vehicle!: IVehicle;
  vehicledata!: IVehicle;
  isLoading = false;
  data: any;
  isSubmitted = false;
  _id!: number;
  vehicleImageDirectoryPath: any = this.api.imageURL + 'vehicle_images/';
  url = '';
  files ? : any;
  
  constructor(
    private fb: FormBuilder,
    private router: Router,
    private api: ApiService,
    private route: ActivatedRoute,
    private store: Store &lt; AppState &gt; ,
    private vehicleService: VehicleService
  ) {}
  
  onSelectFile(event: any) {
    if (event.target.files &amp;&amp; event.target.files[0]) {
      var reader = new FileReader();
  
      reader.readAsDataURL(event.target.files[0]); // read file as data url
      this.files = event.target.files[0]; // associates the file to the a different property
      reader.onload = (event: any) =&gt; { // called once readAsDataURL is completed
        //   console.log(event);
        this.url = event.target.result;
      }
    }
  }
  
  editVehicle() {
    this.editForm = this.fb.group({
      registration_number: ['', [Validators.required, Validators.minLength(2), Validators.maxLength(50)]],
      vehicle_image: ['', [
        RxwebValidators.extension({
          extensions: ["jpg", "jpeg", "bmp", "png", "gif", "svg"]
        })
      ]]
    });
  }
  
  loadVehicleById() {
    this.vehicleService.getVehicleById(this._id)
      .subscribe(
        (data: VehicleResponse) =&gt; {
          this.vehicledata = data.results.vehicle;
          this.editForm.patchValue({
            registration_number: this.vehicledata.registration_number,
            vehicle_image: this.vehicledata.vehicle_image,
          });
          this.isLoading = false;
        }
      );
  }
  
  ngOnInit(): void {
    this._id = this.route.snapshot.params['id'];
    bsCustomFileInput.init();
    this.editVehicle();
    this.loadVehicleById();
    this.isLoading = false;
  }
  
  submitForm() {
    this.isSubmitted = true;
    // stop here if form is invalid
    if (this.editForm.invalid) {
      return;
    }
    this.isLoading = true;
  
    const formVehicleData = this.editForm.getRawValue();
    const formData = new FormData();
  
    formData.append('registration_number', formVehicleData.registration_number);
    if (this.files) {
      formData.append("vehicle_image", this.files, this.files.name);
    }
    this.vehicleService.updateVehicle(this._id, formData).subscribe(res =&gt; {
      this.data = res;
    });
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="card-body"&gt;
    &lt;form [formGroup]="editForm" (ngSubmit)="submitForm()"&gt;
  
      &lt;div class="col-lg-4"&gt;
        &lt;div class="form-group"&gt;
          &lt;label for="registration_number"&gt;Registration No.:&lt;span style="color:red;"&gt;*&lt;/span&gt;&lt;/label&gt;
          &lt;input type="text" formControlName="registration_number" placeholder="XB-547-AG" class="form-control" required/&gt;
        &lt;/div&gt;
        &lt;div *ngIf="isSubmitted || (fc.registration_number.touched &amp;&amp; fc.registration_number.invalid)"&gt;
          &lt;div *ngIf="fc.registration_number.hasError('required')"&gt;
            &lt;div class="text-danger"&gt;
              Registration Number is required!
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div *ngIf="fc.registration_number.hasError('minlength')"&gt;
            &lt;div class="text-danger"&gt;
              Registration Number cannot be less than 2 characters!
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div *ngIf="fc.registration_number.hasError('maxlength')"&gt;
            &lt;div class="text-danger"&gt;
              Registration Number cannot be more than 50 characters!
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="col-lg-4"&gt;
        &lt;div class="form-group"&gt;
          &lt;label for="vehicle_image"&gt;Vehicle Image:&lt;/label&gt;
          &lt;div class="card-body box-profile"&gt;
            &lt;div class="text-center"&gt;
              &lt;img class="profile-user-img img-fluid img-circle" [src]="vehicledata.vehicle_image ? vehicleImageDirectoryPath+vehicledata.vehicle_image : url || 'assets/img/no-image.png'" alt="No Vehicle Image" onerror="this.src='assets/img/no-image.png'" style="height:150px; width:150px"&gt;
            &lt;/div&gt;
            &lt;div class="form-group"&gt;
              &lt;input formControlName="vehicle_image" id="vehicle_image" type="file" class="form-control" accept=".jpg,.jpeg,.bmp,.png,.gif,.svg" (change)="onSelectFile($event)"&gt;
              &lt;div *ngIf="fc.vehicle_image.touched &amp;&amp; fc.vehicle_image.invalid"&gt;
                &lt;div *ngIf="fc.vehicle_image.hasError('extension')"&gt;
                  &lt;div class="text-danger"&gt;
                    Enter valid File Type!
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="card-footer"&gt;
        &lt;button type="submit" class="btn btn-success" [disabled]="isLoading" class="btn btn-success" (click)="editValidate()"&gt;
                    &lt;span *ngIf="isLoading" class="spinner-border spinner-border-sm mr-1"&gt;&lt;/span&gt;
                    &lt;i class="fa fa-save" aria-hidden="true"&gt;&lt;/i&gt; Save&lt;/button&gt;
      &lt;/div&gt;
    &lt;/form&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>While trying to retrieve and view the data before I eventually update, I got this error:</p>
  <blockquote>
  <p>ERROR TypeError: Cannot read properties of undefined (reading 'vehicle_image')
  at VehicleEditComponent_Template (vehicle-edit.component.html:245)</p>
  </blockquote>
  <p>It highlights this page:</p>
  <blockquote>
  <p>[src]=&quot;vehicledata.vehicle_image ? vehicleImageDirectoryPath+vehicledata.vehicle_image : urlVehicle || 'assets/img/no-image.png'&quot;</p>
  </blockquote>
  <p>But the registration_number was displayed. vehicle_image exists. Could it be because the image is null?</p>
  <p>How do I resolve this?</p>
  <p>Thanks</p>