在我的应用程序中,ngOnInit()
加载货币、类别和制造商。我为此使用 Angular 7 反应形式。数据按预期加载,下拉列表中填充了值以及选择的第一个选项并向用户显示。所以,这就是问题所在,完成表单并单击提交(使用默认下拉值)后,我看到一个空对象category
, currency
, and manufacturer
.
产品新组件.ts
import {Component, OnInit} from '@angular/core';
import {Router} from '@angular/router';
import {ProductService} from '../service/product.service';
import {FormControl, FormGroup, Validators} from '@angular/forms';
import {CATEGORY_API_URL, CURRENCY_API_URL, MANUFACTURER_API_URL, PRODUCT_API_URL, SERVER_URL} from '../../../app.constants';
import {Product} from '../model/product';
import {Price} from '../model/price';
import {CategoryService} from '../../category/service/category.service';
import {Category} from '../../category/model/category';
import {Currency} from '../model/currency';
import {Manufacturer} from '../model/manufacturer';
@Component({
selector: 'app-product-new',
templateUrl: './product-new.component.html',
styleUrls: ['./product-new.component.css']
})
export class ProductNewComponent implements OnInit
{
categories: Array<Category>;
currencies: Array<Currency>;
manufacturers: Array<Manufacturer>;
productForm = new FormGroup({
id: new FormControl({value:'',disabled:true}, Validators.minLength(2)),
name: new FormControl(''),
description: new FormControl(''),
price: new FormControl(''),
amount: new FormControl(''),
categoryControl: new FormControl(''),
currencyControl: new FormControl( '' ),
manufacturerControl: new FormControl( '' ),
});
constructor(private productService:ProductService, private categoryService:CategoryService,private router:Router) {}
ngOnInit()
{
this.loadCategories();
this.loadCurrencies();
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='Admin';
product.createdDate='';
product.lastModifiedBy='Admin';
product.lastModifiedDate='Admin';
const url=SERVER_URL+PRODUCT_API_URL+'create';
this.productService.createProduct(url,product).subscribe(
value =>
{
console.log('Successfully created product');
},error1 =>
{
console.log('Failed to create product');
},
()=>{
this.router.navigate(['/product/list']);
});
}
private loadCategories()
{
const url=SERVER_URL+CATEGORY_API_URL+'list';
this.categoryService.getCategories(url).subscribe(
categories =>
{
this.categories=categories;
},
error1 =>
{
},
()=>{
});
}
private loadCurrencies()
{
const url=SERVER_URL+CURRENCY_API_URL+'list';
this.productService.getCurrencies( url ).subscribe(
currencies =>
{
this.currencies=currencies;
},
error1 =>
{
},
() =>
{
} );
}
private loadManufacturers()
{
const url=SERVER_URL+MANUFACTURER_API_URL+'list';
this.productService.getManufacturers( url ).subscribe(
manufacturers =>
{
this.manufacturers=manufacturers;
},
error1 =>
{
},
() =>
{
} );
}
manufacturersDataAvailable(): boolean
{
return this.manufacturers!==undefined;
}
categoriesDataAvailable(): boolean
{
return this.categories!==undefined;
}
currenciesDataAvailable(): boolean
{
return this.currencies!==undefined;
}
goBack() {
this.router.navigate(['/product']);
}
}
产品.组件.html
<div>
<h2>Create New Product</h2>
<br/>
<form [formGroup]="productForm">
<div class="form-group">
<label for="id">Product Id</label>
<input type="text" class="form-control" id="id" formControlName="id">
<small id="emailHelp" class="form-text text-muted">Automatically generated by system</small>
</div>
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" formControlName="name" required placeholder="Enter Product Name">
</div>
<div class="form-group">
<label for="description">Description</label>
<input type="text" width="200" height="100" class="form-control" id="description" formControlName="description" required placeholder="Enter Product Description">
</div>
<div class="form-group">
<label for="currencyControl">Price</label> <br/>
<label>
<select class="form-control" formControlName="currencyControl" name="currencyControl" id="currencyControl">
<option *ngFor="let currency of currencies">
{{currency.name}}
</option>
</select>
</label>
<input formControlName="amount" id="amount" placeholder="Enter Product Price (in USD)" required
style="margin: 10px; padding: 5px" type="text">
</div>
<div class="form-group">
<label>Category:
<select class="form-control" name="categoryControl" formControlName="categoryControl">
<option *ngFor="let category of categories">
{{category.name}}
</option>
</select>
</label>
</div>
<div class="form-group">
<label>Manufacturer:
<select class="form-control" formControlName="manufacturerControl" name="manufacturerControl">
<option *ngFor="let manufacturer of manufacturers">
{{manufacturer.name}}
</option>
</select>
</label>
</div>
<button type="submit" class="btn btn-primary" (click)="createProduct()">Submit</button>
<button type="button" class="btn btn-primary" style="margin-left: 30px" (click)="goBack()">Cancel</button>
</form>
</div>
如果我更改选择语句以使用[ngValue]="category"
当从服务器加载数据时,我在下拉列表中看不到默认值并引发错误任何适用的指令或选项元素均未提供属性 ng 值