I have a form in my html component:
<form (ngSubmit)="onSubmit()">
<div class="col-6">
<mat-form-field appearance="outline" [formGroup]="FORM">
<mat-label>Select a Region</mat-label>
<mat-select formControlName="Y">
<mat-option *ngFor="let Y of locales" [value]="Y.value" >
{{Y.viewValue}}
</mat-option>
</mat-select>
</mat-form-field>
</div>
<div class="col-6">
<mat-form-field appearance="outline" [formGroup]="FORM">
<mat-label>Select a Category</mat-label>
<mat-select formControlName="category">
<mat-option *ngFor="let X of Xs" [value]="option.value" >
{{X.viewValue}}
</mat-option>
</mat-select>
</mat-form-field>
</div>
<div class="container">
<button mat-raised-button color="primary" type="submit">Primary</button>
</div>
</form>
These valued are passed to my onSubmit(). The this.options.value is able to return the values and my browser console displays the return values.
onSubmit() {
// Return if form is invalid
if (this.options.invalid) {
return;
}
console.log('Submit', this.options.value);
}
I want to add as parameters to a service page I have for an API:
example(): Observable<exampleService[]> {
return this.httpclient.get<exampleService[]>(`${this.apiUrl}country=us&category=users`);
}
I am trying to use the user input from the form and fill the "country" and "category" with the values I get returned from the html. It seems like a basic JS fundamental that I am overthinking or can't remember learning.
Help appreciated, thanks!
This should be pretty straight forward. I think you should follow these steps :
Change the signature of the example method to add two parameters something like :
example(country, category): Observable<exampleService[]> {
return this.httpclient.get<exampleService[]>(`${this.apiUrl}country=${country}&category=${category}`);
}
In your component.ts file , you should retrieve the respective values via formControlName. something similar to below :
let country = this.FORM.controls['Y'].value; let category = this.FORM.controls['category'].value;
and you can pass the above two values to the example method while invoking the same.
Hope this will helpful. Let me know by posting your feedback here so that it will be helpful for others as well. If this will solve your problem, don't forget to upvote this answer.