Компонент не рендерится на Angular, ошибка не отображается

Question

Я пытаюсь загрузить сведения о продукте, для которого я пытаюсь получить значения из формы.

Я всегда сталкиваюсь с проблемой обработки форм с помощью angular. Другие компоненты воспроизводятся без проблем.

Это компонент. html код:

  <form>
        <div class="form-group">
            <label for="title">Title</label>
            <input type="text" name="title" id="title" class="form-control" #title/>
        </div>
        <div class="form-group">
            <label for="category">Category</label>
            <select name="category" id="category" class="form-control" #category>
                <option value="cardio">Cardio</option>
                <option value="strength">Strength</option>
                <option value="strength">Cross Training</option>
                <option value="strength">Outdoor</option>
                <option value="strength">Home equipment</option>
            </select>
        </div>
        <div class="form-group">
            <label for="imported">Imported</label>
            <select name="category" id="category" class="form-control" #imported>
                <option value="International">International</option>
                <option value="Indian">Indian</option>
            </select>

        </div>
        <div class="form-group">
            <label for="type">Type</label>
            <input type="text" name="type" id="type" class="form-control" #type/>
        </div>
        <div class="form-group">
            <label for="description">Description</label>
            <input name="description" id="description" class="form-control" #description/>
        </div>
        <div class="form-group">
            <label for="product-img">Image of the product</label>
            <input type="file" (change)="onFileChange($event)" class="form-control"/>
        </div>
        <button type="button" (click)="uploadProduct(title.value, category.value, imported.value, type.value, description.value)" class="button-theme">Submit</button>
    </form>

Это код component.ts,

import { Component, OnInit } from '@angular/core';
import { Product } from '../model/product';
import { ProductsService } from '../products.service';
import { FormControl, FormGroup } from '@angular/forms';
import {FormsModule,ReactiveFormsModule} from '@angular/forms';

@Component({
  selector: 'app-addproduct',
  templateUrl: './addproduct.component.html',
  styleUrls: ['./addproduct.component.css']
})
export class AddproductComponent implements OnInit {
  product: Product;
  constructor(private helper: ProductsService) { }
  ngOnInit(): void {
  }
  onFileChange(event){
    var data = {
      "file": event.target.file
    }
    this.helper.uploadProduct(data).subscribe(d => {
      this.product.path = d;
    });
  }
  uploadProduct(title: string, category: string, imported: string, type: string, description: string){
    this.product.mapProduct(title, description, type, category, imported);
    this.helper.saveProduct(this.product);
  }
}

ТИА! :)