Как получить ввод формы, выбрать значение, используя Угловое связывание?

Question

Я новый в угловой2. Поэтому, пожалуйста, несите меня. Я знаю, что для кого-то это вопрос.

<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, мы можем получить значение тех, кто использует $ объема.

Любая помощь будет оценена по достоинству. Благодарю.

Answer 1

Если вы можете изменить разметку. Я удалил баланс. Я не знаю, как использовать баланс в угловом2.

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

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

Надеется, что он работает с вами. Ура!

Answer 2

balance.viewBy будет содержать значение после изменения выбора.

value (для строк) или ngValue (для других типов) свойство должно быть установлено

<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

Таким образом, вы пытаетесь связать различные свойства модели объекта (регулярный объект), чтобы ваши различные элементы управления ,

Объект модели должен существовать в вашем компоненте как свойство. Вы должны инициализировать свою модель как часть своего компонента. Затем, чтобы получить значения, вы должны посмотреть в этом объекте недвижимости как таковой:

export class BalanceComponent { 

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

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

}