7

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.

Improve this question
1
  • show full component.ts Commented Oct 6, 2016 at 4:45

3 Answers 3

Reset to default
2

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>
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

2

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

}
Improve this answer

2 Comments

this.balance.dateTo will be undefined. Because it is not attached to the form. The balance.dateTo will get the default balance that I set. Thanks for your answer. It helps me to understand more the concept of angular2
The view directives such as <input [(ngModel)]="balance.dateFrom" name="dateFrom"/> bind it to the form.
1

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!

Improve this answer

3 Comments

It worked but I want to get the object balance. Thanks for answer.
Edited! Try solution 2. Notify me if you got error.
Thanks! Worked like charm. Finally.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.