Angular 2.0 forms callback and logic issue

Question

I am very new to Angular, i am truing to create a simple script to update the price when the value of a form input gets changed. There seems to be several different methods for using Angular with class driven and directive driven models. Read the documentation from the main angular website, but no luck.

import { Component } from '@angular/core';
export class Ticket {
  ticketNumber: number;
  name: string;
  price: number;
}
@Component({
  selector: 'my-app',
  template: `
    <form name="myForm">
    <div class="ticket box_shadows">
       <div class="ticket_title">{{ticket.name}}</div>
        <input type="number" name="myInput" class="ticket_ammount" min="1" max="10" value="{{ticket.ticketNumber}}"required ng-class="updatePrice(price,ticketNumber)">
        <div class="ticket_details"><input class="ticket_details_input" type="text"  placeholder="Name:" required></div>
        <div class="ticket_details"><input class="ticket_details_input" type="email" placeholder="your@email.com" required></div>
        <div class="ticket_details"><input class="ticket_details_input" type="text"  placeholder="+852" required></div>
        <div class="ticket_price">$ <input type="number" name="price" value="{{ticket.price}}|>
        <button type="button" class="ticket_button">Book</button>
        </div>
    </div>
    </form>
    `
})
//creates the class
export class AppComponent {
  ticket: Ticket = {
    ticketNumber: 1,
    name: 'Ticket',
    price: 300 
  };
  //updates the price on a new click
  updatePrice(value, ticketN){
      value = value * ticketN;
      return value; 
      // this then needs to be passed back to the price input field. 
  }
}

----- UPDATE ------- so i was having issues with calling two class's, and trying to make them interact. I striped out the code and started again this is what i put in to make it work.

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <form>
    <div class="ticket box_shadows">
        <div class="ticket_top">
            <div class="ticket_title">{{title}}</div>
          <input type="number" name="myInput" class="ticket_ammount" min="1" max="10" [(ngModel)]="ticket" (click)="updatePrice()" required>
        </div>
        <div class="ticket_btm">
            <div class="ticket_price"><span>$</span><input type="number" [(ngModel)]="totalPrice" class="ticket_price_number" disabled></div>
            <div class="ticket_btm_spacer"></div>
            <button type="button" class="ticket_button">Book</button>
        </div>
    </div>
    </form>
    `
})
export class AppComponent {
  ticket: number = 1;
  title: string = "Ticket";
  price: number = 300;
  totalPrice: number = 300; 
  updatePrice(){
    this.totalPrice = this.price * this.ticket;
    if(this.ticket >= 2){
      this.title = "Tickets";
    }
    else{ this.title = "Ticket";}
  } 
}

Answer 1

要以两种方式将值绑定到输入，您需要使用ngModel 。

<input [(ngModel)]="ticket.price">