Encountering an error in my project:
ERROR Error: No value accessor for form control with name: 'products'.
Incorporating an array of Products in Myform component is what I aim to achieve.
Tackling 2 issues:
- Upon clicking the Register button, the aforementioned error appears.
- Although my products array displays correctly in the table, it turns empty upon Registration. Referencing my source code.<
Here's the Html code snippet:
<form [formGroup]="Myform" (ngSubmit)="onaddMyForm()">
<div class="contant">
<div class="input-field col s4">
<div class="input-field col s12">
<select formControlName="client_id" id="client_id" materialize="material_select" [materializeSelectOptions]="client">
<option value="" disabled selected>ClientName</option>
<option *ngFor="let item of client" [value]="item.client_id">{{item.clientName}}</option>
</select>
</div>
<br>
<div class="row">
<div class="input-field col s12">
<label for="total">total:</label>
<input formControlName="total" id="total" type="text" class="validate">
</div>
</div>
</div>
</div>
<br>
<table formControlName="products" align="center" class="table table-bordered table-hover">
<thead>
<tr style="color:black;">
<th>Price</th>
<th>Quantita</th>
<th>Subtotale</th>
</tr>
</thead>
<tbody>
<tr [routerLink]="i" class="group" style="cursor: pointer" *ngFor="let item of products; let i=index">
<td>{{item.Price}}</td>
<td>{{item.Quantita}}</td>
<td>{{item.Subtotale}}</td>
</tr>
</tbody>
</table>
<br>
<hr>
<br>
<div id="add_homebox_button_container" class="row" style="float: right;">
<button id="add_client_button" type="submit" class="btn waves-effect waves-light">
Register
</button>
</div>
</form>
Delving into my ts code:
Exploring my constructors:
constructor(
private router: Router,
private fb: FormBuilder,
private ss: ws,
) {
// Formulating the formGroup
this.Myform = new FormGroup({
'client_id': new FormControl('', Validators.required),
'products': this.fb.array([]),
'total': new FormControl('', Validators.required)
});
}
//Initiating the function that posts My form Value in ws
onaddMyForm() {
this.loading = true;
let newprod = new Product(
this.Myform.value
);
console.log(newprod)// my array shows as empty in the console
this.ss.prodcreate(newprod).subscribe(
result => {
if (result === true) {
Materialize.toast('Prod saved successfully', 4000);
} else {
this.loading = false;
}
},
error => {
this.loading = false;
}
);
}
Seeking solutions to rectify the issue. Image showcasing the error: