How can I pass a select HTML element as a parameter in a onSubmit form call?-CodePudding

I am trying to pass the html elements of a form through the submit function as parameters. I can get correctly the nameInput element with flag #nameInput, but the select element (#skillSelect) is throwing this error:

- error TS2339: Property 'skillSelect' does not exist on type 'MemberFilterComponent'.

Here is my form template. How can I pass the select element to component as I did with the input text?:

<form
  [formGroup]="filterMemberForm"
  (ngSubmit)="onSubmit(nameInput, skillSelect)"
>
  <div >
    <div >
      <label 
        >Name
        <input
          ngDefaultControl
          type="text"
          
          label="'Name'"
          formControlName="name"
          placeholder=" Ex: Maria Novillo"
          required
          id="name"
          #nameInput
          (change)="mapChipValue(nameInput)"
      /></label>
    </div>
    <div  *ngIf="skills.length !== 0">
      <label >Skills:</label>
      <select
        id="skillId"
        
        formControlName="skillId"
        #skillSelect
        (change)="mapChipValue(skillSelect)"
      >
        <option value="">-- Select skills --</option>
        <option *ngFor="let skill of skills" [value]="skill.idSkill">
          {{ skill.skill }}
        </option>
      </select>
    </div>
  <div >
    <div >
      <button type="submit" >Apply</button>
    </div>
  </div>
</form>

CodePudding user response：

In the html file:

<select class='select-option'
#mySelect
(change)='onOptionsSelected(mySelect.value)'>
 <option class='option' 
*ngFor='let option of dropDownData' 
[value]="option.seo_val">{{option.text_val}}</option>
</select>

In the ts file:

onOptionsSelected(value:string){
 console.log("the selected value is "   value);
}

CodePudding user response：

why you need pass the "html element"? in filterMemberForm.value you has an object with the values. Really your form should be

<form
  [formGroup]="filterMemberForm"
  (ngSubmit)="onSubmit(filterMemberForm)"
>

onSubmit(form:FromGroup)
{
   if (form.valid)
      console.log(form.value)
   else
      form.markAllAsTouched()
}

if you need the selectOption name always can makes

onSubmit(form:FromGroup)
{
   if (form.valid)
   {
      //if is not multiple select
      const selectedItem=this.skills.find(x=>x.idSkill==form.value.skillId)
      console.log(form.value,selectedItem)

      //if is multiple select
      const selectedItems=this.skills.filter(
             x=>form.value.skillId.indexOf(x.idSkill)>=0)

      console.log(form.value,selectedItems)
   }
   else
      form.markAllAsTouched()
}