Issue
I've created a angular form which sends values to webapi and prints the received value below the form on Submit.
Try.component.html:
<div class="container">
<form [formGroup]="form" (submit)="onSubmit()" class="mb-3">
<!-- <form class="mb-3"> -->
<div class="mb-3" class="row">
<label for="bike" class="form-label fw-bold">Bike:</label>
<input type="text" class="form-control" id="bike" formControlName="bike" placeholder="Enter your Bike name">
</div>
<button type="submit" class="btn btn-primary mr-1">Submit</button>
</form>
<br>
<br>
<div class="table-responsive">
<table class="table table-bordered" role="grid">
<thead class="bg-primary">
<tr>
<th>Bike Name</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let name of names">
<td>
<input type="text" [(ngModel)]="name.bike" name="bike">
</td>
</tr>
</tbody>
</table>
</div>
</div>
Try.component.ts:
export class TryComponent {
names: any[] = [];
form: FormGroup;
constructor(private fb: FormBuilder, private namesService: NamesService) {
this.form = this.fb.group({
bike: ['', [Validators.required, Validators.minLength(3)]]
});
this.namesService.getBikes();
}
Reset(){
this.form.reset();
}
onSubmit() {
this.form.controls['bike'].markAsTouched();
if (this.form.valid) {
const data={
...this.form.value,
}
console.log(data);
this.namesService.addBike(data).subscribe(response => {
console.log(response);
this.namesService.getBikes().subscribe(names => {
this.names = names;
console.log(this.names);
console.log("success");
});
});
}
}
}
Names.service.ts:
export class NamesService {
constructor(private http: HttpClient) { }
addBike(nameData : any): Observable<any>{
return this.http.post<any[]>('https://localhost:7006/api/Names/submit-form',nameData);
}
getBikes(): Observable<any[]> {
return this.http.get<any[]>('https://localhost:7006/api/Names/get-form-data');
}
}
The issue is not with the API, because I'm able to print the entered values as an array on the console (Works fine when tested with swagger).Even after importing the necessary modules I'm not able to bind the value and display it below the form. I guess the problem lies with the Array not being updated with the received values in front-end or the way I bind.
Can someone tell me where did I went wrong.
Solution
Modify your TryComponent
as follows:
import { Component, OnInit } from '@angular/core'; // Import OnInit
// ... other imports ...
export class TryComponent implements OnInit { // Implement OnInit
names: any[] = [];
form: FormGroup;
constructor(private fb: FormBuilder, private namesService: NamesService) {
this.form = this.fb.group({
bike: ['', [Validators.required, Validators.minLength(3)]
});
}
ngOnInit() {
this.namesService.getBikes().subscribe(names => {
this.names = names;
});
}
// ... rest of your component code ...
}
By implementing OnInit
, you ensure that the getBikes()
call is made when the component is initialized.
Make sure to update the names
array after successfully adding a bike in your onSubmit()
method:
onSubmit() {
this.form.controls['bike'].markAsTouched();
if (this.form.valid) {
const data = {
...this.form.value,
};
this.namesService.addBike(data).subscribe(response => {
console.log(response);
this.namesService.getBikes().subscribe(names => {
this.names = names; // Update the names array
console.log(this.names);
console.log("success");
});
});
}
}
Answered By - Chintan Dhokai
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.