フォーム入力を取得するには、角度結合を使用して値を選択しますか？

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. 
    } 
} 

私がこれまでangular1で

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

// returns error 

を試してみました何、我々は$スコープを使用してこれらの値を取得することができます。

ご協力いただければ幸いです。ありがとう。

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：

//関数の引数にバランスのオブジェクトを渡します。だから、あなたは

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 
    } 
} 

が、それはあなたと一緒に働くホープ

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

Componentクラスのコンポーネントからそれを得ることができます。乾杯！

Answer 2

balance.viewByは、選択変更後の値を含みます。プロパティが

<option [ngValue]="1">1</option> 
    <option [ngValue]="2">2</option> 
    <option [ngValue]="3">3</option> 
    <option [ngValue]="4">4</option> 
    <option [ngValue]="5">5</option> 

Answer 3

だから、あなたはあなたのさまざまなコントロールに、モデルオブジェクト（通常のオブジェクト）の異なる特性をバインドしようとしているを設定する必要があります（他のタイプの）

value（文字列の場合）またはngValue 。

モデルオブジェクトはコンポーネントとしてプロパティとして存在する必要があります。モデルをコンポーネントの一部として初期化する必要があります。値を取得するには、そのプロパティオブジェクトを次のようにしてください。

export class BalanceComponent { 

    private balance = {}; // <---- 

    search_data_balance(){ 
     console.log(this.balance.dateTo); // <---- 
    } 

}