angular6 – The drop-down object of angular selection 7 is empty when it is not touched

In my application,ngOnInit () charges currencies, categories and manufacturers. I'm using 7 angular reactive forms for this. Data loads as expected and drop-down lists containing values ​​and the first option selected and shown to the user. So here's the problem, after finishing the form and clicking Submit (using the default drop-down values), I see an empty object for the Category, motto, and maker. Am I doing something wrong? or is it a bug?

ProductNewComponent.ts

import {Component, OnInit} from '@ angular / core & # 39 ;;
import {router} from & # 39; @ angular / router & # 39 ;;
import {ProductService} from .. / service / product.service & # 39 ;;
import {FormControl, FormGroup, Validators} from @ angular / forms & # 39 ;;
import {CATEGORY_API_URL, CURRENCY_API_URL, MANUFACTURER_API_URL, PRODUCT_API_URL, SERVER_URL} from & # 39; ../../../ app.constants & # 39 ;;
import {Product} from .. / model / product & # 39 ;;
import {Price} from .. / model / price & # 39 ;;
import {CategoryService} from ../../ category / service / category.service & # 39 ;;
import {Category} from ../../ category / model / category & # 39 ;;
import {currency} from .. / model / currency & # 39 ;;
import {Manufacturer} from .. / model / manufacturer & # 39 ;;

@Component({
selector: & # 39; app-product-new & # 39;
templateUrl: & # 39; ./ product-new.component.html & # 39;
styleUrls: ['./product-new.component.css']
})
The ProductNewComponent export class implements OnInit
{
categories: table;
currencies: Array;
manufacturers: Array;

productForm = new FormGroup ({
id: new FormControl ({value: # deactivated: true}, Validators.minLength (2)),
name: new FormControl (& # 39;),
description: new FormControl ('#'),
price: new FormControl ('#'),
amount: new FormControl (& # 39;),
categoryControl: new FormControl (& # 39;),
currencyControl: new FormControl (& # 39;),
manufacturerControl: new FormControl (& # 39;),
});
constructor (private productService: ProductService, private categoryService: CategoryService, private router: Router) {}

ngOnInit ()
{
this.loadCategories ();
this.loadCurrency ();
this.loadManufacturers ();
}


createProduct ()
{
const product = new product ();
product.name = this.productForm.value.name;
product.description = this.productForm.value.description;
product.price = new Price (this.productForm.value.currencyControl, this.productForm.value.price);
product.category = this.productForm.value.categoryControl;
product.manufacturer = this.productForm.value.manufacturerControl;

product.createdBy = & # 39 ;;
product.createdDate = & # 39 ;;
product.lastModifiedBy = & # 39; Admin & # 39 ;;
product.lastModifiedDate = Admin & # 39 ;;


const url = SERVER_URL + PRODUCT_API_URL + & # 39; create & # 39 ;;

this.productService.createProduct (url, product) .subscribe (
value =>
{
console.log (& # 39; product successfully created & # 39;);
}, error1 =>
{
console.log ("Unable to create the product");
}
() => {
this.router.navigate (['/product/list'])
});
}


loadCategories private ()
{
const url = SERVER_URL + CATEGORY_API_URL + & # 39; list;

this.categoryService.getCategories (url) .subscribe (
categories =>
{
this.categories = categories;
}
error1 =>
{
}
() => {
});
}

private chargeC currencies ()
{
const url = SERVER_URL + CURRENCY_API_URL + & # 39; list & # 39 ;;

this.productService.getCurrency (url) .subscribe (
currency =>
{
this.currency = currency;
}
error1 =>
{
}
() =>
{
});
}


private chargeManufacturers ()
{
const url = SERVER_URL + MANUFACTURER_API_URL + & # 39; list & # 39 ;;

this.productService.getManufacturers (url) .subscribe (
manufacturers =>
{
this.manufacturers = manufacturers;
}
error1 =>
{
}
() =>
{
});
}

manufacturersDataAvailable (): boolean
{
return this.manufacturers! == undefined;
}

categoriesDataAvailable (): boolean
{
send back this.categories! == undefined;
}

cenciesDataAvailable (): boolean
{
return this.currency! == undefined;
}

return () {
this.router.navigate (['/product'])
}
}

product.component.html

Create a new product


Automatically generated by the system