CODEWITHSUNDEEP
javascriptangulartypescript
user6879896
user6879896

Reputation:

How to get form input, select value using Angular Binding?

I am new in angular2. So, please bear with me. I know this is a noob question for some.

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

What I have tried so far

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

// returns error

In angular1, we can get the value of those using $scope.

Any help would be appreciated. Thanks.

Upvotes: 7

Views: 172

Answers (3)

hdotluna
hdotluna

Reputation: 5732

If you can change your markup. I removed balance. I don't know how can I used balance in 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>

In your component. You should define each model into class. 

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

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

Edit 2:

// pass balance object in function arguments. So, you can get it from class component

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

Component

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

Hope it works with you. Cheers!

Upvotes: 1

santi-elus
santi-elus

Reputation: 310

So you are trying to bind different properties of a model object (regular object), to your various controls.

The model object should exist in your component as a property. You have to initialize your model as part of your component. Then, to get the values, you should look in that property object, as such:

export class BalanceComponent {

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

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

}

Upvotes: 2

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657008

balance.viewBy will contain the value after selection change.

The value (for strings) or ngValue (for other types) property needs to be set

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

Upvotes: 2

Related Questions