How to [(ngModel)] bind default [selected] <option> 's value in <select> IF user didn't select any option for a <select> in multi filter search bar

Question

the issue is that it is not necessary for all input fields or select tags to be used at the same time to filter, so sometimes users can leave one or several filters without selecting or placing an option/input for them. and in that case I want my select tags to return the value of the default [selected]="true" option when the query is being submitted.

When I run the app the [selected]="true" option is appearing properly at the dropdown select box but whenever I try to submit and run a query without selecting any other option the [selected]="true" option's value is not grabbed which affects the whole query, and I have to choose/select any of the options for each tag in the search bar even if its the defined as [selected]="true" option to grab the value properly which is not idle for the filter search bar I'm trying to build and definitely not user friendly.

I'm using [(ngModel)] to bind the inputs fields' or select tag's options & already set the value of the [selected]="true" option by using [value]=""

Below Images showing & explaining the case

and here is my simplified html file

<div class="input-group mb-3">

    <select class="" name="numbers-list" [(ngModel)]="number" >
          <option [selected]="true" [value]="defaultValue"> Any </option>
          <option value="1"> 1 </option>
          <option value="2"> 2 </option>
          <option value="3"> 3 </option>
    </select>

    <button(click)="searchNumber()"></button>

</div>

here is the simplified component.ts file

import { Component, OnInit } from '@angular/core';
import {NumberService} from '../../services/numbers.service';


export class ListingsListComponent implements OnInit {
  
  list: any:
  number: any;
  defaultValue: any;
 

constructor(private numberService: NumberService) {}


searchNumber(): void {
    this.defaultValue = "Any"
    this.numberService.findByNumber(this.number)
      .subscribe(
        data => {
          this.list = data;
          console.log(data);
        },
        error => {
          console.log(error);
        });
  }
}

here is the simplified Service file

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

const baseUrl = 'http://localhost:3000/numbers';

@Injectable({
  providedIn: 'root'
})
export class NumberService {



constructor(private http: HttpClient) { }

    findByNumber(number): Observable<any> {
    return this.http.get(`${baseUrl}?number=${number}`);
  }

}

This image shows first when I run the app or refresh the browser it automatically shows the [selected] options

Second Image shows what happens when I press the button to submit the query without selecting any options for the select tags but only filling the Input field &

Third Image Shows that the query works & fetched the requested data only when I manually pressed and selected the options I want

so the query and every thing works properly if I select options and didn't leave them to the default options and what I want is if the user didn't select an option in one of the tags, this select tag should automatically provide its default options value on submit

Answer 1

remove the [selected]="true" in option. You should control all based in the value of your variable this.number, so you can, e.g.

this.numberService.findByNumber(this.number?this.number:this.defaultValue)

Or if is possible, when declare the variable number

defaultValue="Any"
number: any=this.defaultValue