大家好，我有兩個模型類別和產品我想使用 FormArray 以相同的形式添加類別和多個產品，問題是當我在本地陣列中嘗試它時它作業得很好但是當我用我的模型嘗試它時它根本不作業
經驗
這種情況下它在本地陣列中作業
formData = {
nom:'',
products:[
{
nom:'',
prix:0,
}
]
}
但是當我呼叫我的類別模型時它不起作用（將其更改為類別）
formData = new Category();
這是我的類別模型
import { Product } from "./product"
export class Category {
idcategory!: number
nom!: string
products!:Product[]
}
這是我的組件形式
export class AddcatprodapiComponent implements OnInit {
isSubmitted:boolean =false;
count=0;
formData = new Category();
constructor( private fb:FormBuilder,private categoryService : CategoryService) { }
ngOnInit(): void {
}
myReactiveForm = new FormGroup({
nom:new FormControl(null),
products:new FormArray([]),
});
addMember(){
this.count ;
if(this.count >=2){
this.formData.products.push({
nom:'',
prix:0
})
}
this.members.push(this.memberAdded())
}
get members() :FormArray {
return this.myReactiveForm.get('products') as FormArray;
}
memberAdded(){
return this.fb.group({
nom: [''],
prix:['']
})
}
removeMember(){
this.isSubmitted= false;
this.members.removeAt(this.members.length-1);
this.count--;
this.formData.products.splice(this.count)
}
onSubmit(form:FormGroup){
this.isSubmitted = true;
this.formData.nom= form.value.nom;
for(let i=0;i< this.count;i ){
this.formData.products[i].nom=form.value.products[i].nom;
this.formData.products[i].prix=form.value.products[i].prix;
}
this.categoryService.addcategory(this.formData).subscribe(
prod => {console.log(prod);
});
}
}
這是我在 html 中的看法
<form class="position-relative w-100" [formGroup]="myReactiveForm" (ngSubmit)="onSubmit(myReactiveForm)">
<label for="">nom</label>
<input type="text" formControlName="nom">
<h5>product</h5>
<button (click)="addMember()" type="button">add</button>
<br>
<button (click)="removeMember()" type="button">remove</button>
<br>
<div formArrayName="products">
<div *ngFor="let member of members?.controls; let i=index">
<div [formGroupName]="i">
<label for="">nom prod</label>
<input type="text" formControlName="nom">
<label for="">prix</label>
<input type="text" formControlName="prix">
</div></div>
</div>
<button >submit</button>
</form>
在本地陣列中，一切正常，但是當我將其更改為新類別時，我遇到了這個問題
uj5u.com熱心網友回復：
有兩個問題
- 需要初始化產品屬性。
- 由于這種情況 this.count >=2，this.formData.products 保持為空，這將引發錯誤。
因此，要么在初始化 Category 時為產品添加默認值，要么在只有一個產品時不允許提交表單
export class Category {
idcategory!: number
nom!: string
products:Product[] = []
}
// With initial value for product
export class Category {
idcategory!: number
nom!: string
products:Product[] = [{
nom:'',
prix:0
}]
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/532597.html