I have an application (frontend angular backend Java Spring boot with jhipster generated). And a reactive form where I am saving material for example something like a screw. But I can not seem to connect it correctly with my Model class of material I only can save one property and that is quantity. I tried to solve it with [(ngModel)] here is what I tried but it only works with quantity. Seller name and PRice Amount work fine too. What I do not understand is why one property works but not the other ones, I could not seem to find the mistake.
<div class="input-group input-group-sm col-12 col-md-6 mb-4">
<div class="input-group-prepend">
<span class="input-group-text" id="materialName">Name</span>
</div>
<input type="text" class="form-control" aria-label="Sizing example input"
aria-describedby="inputGroup-sizing-sm"
formControlName="name"
[(ngModel)]="materialModel.name" name="name">
</div>
<div class="input-group input-group-sm col-12 col-md-6 mb-4">
<div class="input-group-prepend">
<span class="input-group-text" id="materialCode">Material No</span>
</div>
<input type="text" class="form-control" aria-label="Sizing example input"
aria-describedby="inputGroup-sizing-sm"
formControlName="articleNumber"
name="articleNumber"
[(ngModel)]="materialModel.articleNumber">
</div>
</div>
<div class="form-row mb-4">
<div class="input-group input-group-sm col-12 col-md-6 mb-4">
<div class="input-group-prepend">
<span class="input-group-text" id="quantity">Quantity</span>
</div>
<input type="text" class="form-control" aria-label="Sizing example input"
formControlName="quantity"
[(ngModel)]="materialModel.quantity" name="quantity"
aria-describedby="inputGroup-sizing-sm">
</div>
<div class="divider"></div>
<div class="-pull-right">
<button type="button" class="btn btn-primary mb-2" (click)="addSellerInput()">Add Seller</button>
</div>
<div class="form-row mb-4" formArrayName="buyInformation"
*ngFor="let buyInformation of buyInformation().controls; let i = index">
<div class="input-group input-group-sm col-12 col-md-6 mb-4" [formGroupName]="i">
<div class="input-group-prepend">
<span class="input-group-text" id="sellerName">Seller Name</span>
</div>
<input type="text" class="form-control" aria-label="Sizing example input"
aria-describedby="inputGroup-sizing-sm"
formControlName="seller"
[(ngModel)]="sellerModel.name">
</div>
<div class="input-group input-group-sm col-12 col-md-6 mb-4" [formGroupName]="i">
<div class="input-group-prepend">
<span class="input-group-text" id="materialUnitPrice">Price</span>
</div>
<input type="text" class="form-control" aria-label="Sizing example input"
aria-describedby="inputGroup-sizing-sm"
formControlName="price"
name="price"
[(ngModel)]="priceModel.amount">
</div>
</div>
This is my ts file for it:
materialAddForm: FormGroup;
formData: any;
@Input()
materialModel: MaterialModel
@Input()
priceModel: PriceModel
@Input()
sellerModel: SellerModel
constructor(
private materialService: MaterialService,
private priceService: PriceService,
private sellerService: SellerService,
private fb: FormBuilder
) {
this.materialModel = new MaterialModel()
this.priceModel = new PriceModel()
this.sellerModel = new SellerModel()
}
ngOnInit() {
this.materialAddForm = this.fb.group({
name: new FormControl(''),
articleNumber: new FormControl(''),
materialType: new FormControl(''),
quantity: new FormControl(''),
buyInformation: this.fb.array([])
})
}
buyInformation(): FormArray {
return this.materialAddForm.get("buyInformation") as FormArray
}
saveMaterial() {
this.sellerService.addSeller(this.sellerModel).subscribe(console.log);
this.priceService.addPrice(this.priceModel).subscribe(console.log);
this.materialService.addMaterial(this.materialModel).subscribe(console.log);
this.materialAddForm.reset()
this.buyInformation().clear()
console.log(this.materialModel)
}
newBuyForm() {
return this.fb.group(({
seller: new FormControl(''),
price: new FormControl(''),
}));
}
addSellerInput() {
this.buyInformation().push(this.newBuyForm())
}
And my model of Material:
export class MaterialModel{
constructor(
public id?: number,
public name?: string,
public articleNumber?: number,
public quantity?: number,
public price?: number,
public imageURL?: string,
public materialType?: string
) {}
}
Only quantity works so far in the material.