如何获取表单输入,使用Angular Binding选择值？

Question

我是angular2的新手.所以,请耐心等待.我知道这对某些人来说是个问题.

<form>
  <label class="input-group">
    <p>View By</p>
    <select [(ngModel)]="balance.viewBy" name="viewBy">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </label>
  <label class="input-group">
    <p>Date From</p>
    <input [(ngModel)]="balance.dateFrom" name="dateFrom"/>
  </label>
  <label class="input-group">
    <p>Date To</p>
    <input [(ngModel)]="balance.dateTo" name="dateTo"/>
  </label>
  <button type="button" (click)="search_data_balance()">Search</button>
</form>

component.ts

export class BalanceComponent {
    search_data_balance(){
        // get all input value.
    }
}

到目前为止我尝试过的

let vb = balance.viewBy,
  df = balance.dateFrom,
  dt = balance.dateTo;

// returns error

在angular1中,我们可以获得使用$ scope的值.

任何帮助,将不胜感激.谢谢.

Answer 1

如果您可以更改您的标记。我去掉了平衡。我不知道如何在 Angular2 中使用平衡。

<select [(ngModel)]="viewBy" name="viewBy">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

<button type="button" (click)="search_data_balance(viewBy)">Search</button>

在你的组件中。您应该将每个模型定义到类中。

export class BalanceComponent {
    viewBy: any;   // define
    viewBy = 1;    // set value

    search_data_balance(view){
        console.log(view);    
    }
}

编辑2：

// 在函数参数中传递余额对象。所以，你可以从类组件中获取它

<button type="button" (click)="search_data_balance(balance)">Search</button>

成分

export class BalanceComponent {
    // defining balance in component
    // 1 is the default value. You can set it whatever you want.
    private balance = {
        viewBy: 1
    };

    search_data_balance(balance){
        console.log(balance);
        console.log(balance.viewBy); // viewBy value
    }
}

希望它能与您合作。干杯!