Hi there! I'm facing 2 issues with my code, you can find a DEMO here
- When adding a product to the sale form, the input field for `description` changes for all products.
- Changing the input product in the sale does not reflect the change.
I have shared a demo of the code where these issues occur - please take a look.
I've attempted this solution:
Product TypeScript:
this.myform = this.fb.group({
'id': new FormControl('', Validators.required),
'name': new FormControl('', Validators.required),
'description': new FormControl('', Validators.required),
'price':new FormControl('', Validators.required),
'quantity': new FormControl('', Validators.required)
});
Product HTML:
<form [formGroup]="myform" (ngSubmit)="onAddProduct()">
<h4 style="text-align:center">add product</h4>
<div class="input-field col s12"> id
<input formControlName="id" id="id" type="text" class="validate">
</div>
<div class="input-field col s12"> name
<input formControlName="name" id="name" type="text" class="validate">
</div>
<div class="input-field col s12"> description
<input formControlName="description" id="description" type="text" class="validate">
</div>
<div class="input-field col s12"> price
<input formControlName="price" id="price" type="text" class="validate">
</div>
<div class="input-field col s12"> quantity
<input formControlName="quantity" id="quantity" type="text" class="validate">
</div>
<br>
<div id="add_contrat_button_container" class="row">
<button id="add_contrat_button" type="submit" class="button button1">
Shto
</button>
</div>
</form>
Sale TypeScript:
this.addsale = this.fb.group({
'invoice_number': new FormControl('', [Validators.required, Validators.nullValidator]),
'invoice_date': new FormControl('', Validators.required),
'description': new FormControl('', Validators.required),
'products': this.fb.array([
])
});
Sale HTML:
<form [formGroup]="addsale" (ngSubmit)="onaddsale()" class="col s12">
<h4 style="text-align:center">add sale</h4>
<div class="contant">
<div class="row">
<div class="input-field col s4">
invoice_number:
<input formControlName="invoice_number" id="invoice_number" type="text" class="validate">
</div>
<div class="input-field col s4">
<div class="row">
invoice_date:
<input formControlName="invoice_date" id="invoice_date" type="date" >
</div>
</div>
<div class="input-field col s4">
description:
<input formControlName="description" id="description" type="text" class="validate">
</div>
</div>
</div>
<br>
<table>
<thead>
<tr style="color:black;">
<th>id</th>
<th>name</th>
<th>description</th>
<th>price</th>
<th>quantity</th>
</tr>
</thead>
<tbody>
<tr class="group" style="cursor: pointer" *ngFor="let item of products">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td><input formControlName="description" class="validate" [value]="item.description" [ngModel]="item.description" type="text">
</td>
<td>{{item.price}}</td>
<td>{{item.quantity}}</td>
</tr>
</tbody>
</table>
<br>
<br>
<button type="submit">
Register
</button>
</form>
I would appreciate any help on resolving these issues. Ultimately, I want to achieve:
- Ensure that when adding products, the description is unique to each product.
- Make sure that changing the product's description in the sale form captures the latest description.
You can view an image here.