Tengo un formulario en mi componente html:
<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>Estos valores se pasan a mi onSubmit(). this.options.value puede devolver los valores y la consola de mi navegador muestra los valores devueltos.
onSubmit() { // Return if form is invalid if (this.options.invalid) { return; } console.log('Submit', this.options.value); }Quiero agregar como parámetros a una página de servicio que tengo para una API:
example(): Observable<exampleService[]> { return this.httpclient.get<exampleService[]>(`${this.apiUrl}country=us&category=users`); }Estoy tratando de usar la entrada del usuario del formulario y completar el "país" y la "categoría" con los valores que me devuelve el html. Parece un fundamento básico de JS que estoy pensando demasiado o que no recuerdo haber aprendido.
Ayuda apreciada, gracias!
Esto debería ser bastante sencillo. Creo que deberías seguir estos pasos:
Cambie la firma del método de ejemplo para agregar dos parámetros algo como:
example(country, category): Observable<exampleService[]> { return this.httpclient.get<exampleService[]>(`${this.apiUrl}country=${country}&category=${category}`); }En su archivo component.ts, debe recuperar los valores respectivos a través de formControlName. algo similar a lo siguiente:
let country = this.FORM.controls['Y'].value; let category = this.FORM.controls['category'].value;
y puede pasar los dos valores anteriores al método de ejemplo mientras invoca el mismo.
Espero que esto sea útil. Hágamelo saber publicando sus comentarios aquí para que también sea útil para otros. Si esto resuelve su problema, no olvide votar esta respuesta.