获取选择的选项值并传递给url angular

问题描述 投票:0回答:1

我有[(ngModel)]选择选项和输入字段。获取输入字段的值工作正常,而不返回选择选项的值。如何获取选择选项值?这是我的代码:

 export class AppComponent {
     constructor() { }
    age = ''
    year = ''
    month = ''
    number = ''
    amount = ''
    email = ''
    names = ''
      sendDetails(){
        const url ='http://example.api.com/add?age='+this.age+'&year='+this.year+'&month='+this.month+'&number='+this.number+'&amount='+this.amount+'&email='+this.email+'&names='+this.names
console.log(url)
// does not show the month and year shows it as blank
      }
    }

HTML

<input type="text" [(ngModel)]=age >
<select type="text" id="inputMonth" [(ngModel)]=month>
    <option value="01">JAN</option>
    <option value="02">FEB</option>
    <option value="03">MAR</option>
    <option value="04">APR</option>
    <option value="05">MAY</option>
    <option value="06">JUN</option>
    <option value="07">JUL</option>
    <option value="08">AUG</option>
    <option value="09">SEP</option>
    <option value="10">OCT</option>
    <option value="11">NOV</option>
    <option value="12">DEC</option>
  </select>
    <select type="text" id="inputYear" [(ngModel)]=year>
      <option value="2017">2017</option>
      <option value="2018">2018</option>
      <option value="2019">2019</option>
      <option value="2020">2020</option>
      <option value="2021">2021</option>
      <option value="2022">2022</option>
      <option value="2023">2023</option>
      <option value="2024">2024</option>
      <option value="2025">2025</option>
    </select>
<input type="text" [(ngModel)]=number >
<input type="text" [(ngModel)]=amount >
<input type="text" [(ngModel)]=email >
<input type="text" [(ngModel)]=names >
<button (click)=sendDetails()> submit</button>

我希望能够把年份,即2015年和月份,即JUNE转到网址

angular forms drop-down-menu
1个回答
0
投票

如果需要月份名称,则应将选项的值更改为name而不是数值月份值。

<select type="text" id="inputMonth" [(ngModel)]=month>
<option value="JAN">JAN</option>
<option value="FEB">FEB</option>
<option value="MAR">MAR</option>
<option value="APR">APR</option>
<option value="MAY">MAY</option>
<option value="JUN">JUN</option>
<option value="JUL">JUL</option>
<option value="AUG">AUG</option>
<option value="SEP">SEP</option>
<option value="OCT">OCT</option>
<option value="NOV">NOV</option>
<option value="DEC">DEC</option>
</select>

虽然更简洁的方法是制作一个月的对象,然后在你的html中迭代它。

© www.soinside.com 2019 - 2024. All rights reserved.