I have rather simple task. I have 2 models tickets with price and userticket where user enters qty and then in an other field that called paid i want to multiply values of qty field and price from tickets model. Here is what I tryed so far and got property undefined value. My component is:

import { Component, OnInit } from '@angular/core';
import { EventService } from 'src/app/services/event.service';
import { Event } from 'src/app/models/event.model';
import {TicketService} from 'src/app/services/ticket.service';
import {Ticket} from "../../models/ticket.model";
import {Userticket} from "../../models/userticket.model";
import {UserticketService} from "../../services/userticket.service";
import {ActivatedRoute, Router} from "@angular/router";

@Component({
  selector: 'app-userticket-buy',
  templateUrl: './userticket-buy.component.html',
  styleUrls: ['./userticket-buy.component.css']
})
export class UserticketBuyComponent implements OnInit {
  currentTicket: Ticket = {
    price: 0,
    eventid:this.retrieveEvents()



  };
  eventid = this.currentTicket.eventid;

  events?: Event[];
  submitted = false;

  currentUserTicket: Userticket = {
    qty: 1,
    paid:0,



  };
  //final current

  //end
  message = ''

  constructor(
    private eventService: EventService,
    private ticketService:TicketService,
    private userticketService:UserticketService,
    private route: ActivatedRoute,
    private router: Router) { }

  ngOnInit(): void {
    this.message = '';
    this.getTicket(this.route.snapshot.params.id);

  }
  getTicket(id: string): void {
    this.ticketService.get(id)
      .subscribe(
        data => {
          this.currentTicket = data;
          console.log(data);
        },
        error => {
          console.log(error);
        });
  }
  //save order
  saveOrder(): void {
    const data = {
      qty: this.currentUserTicket.qty,
      paid: this.currentUserTicket.paid,

      ticketid: this.currentTicket.id

    };
    //console.log(data.eventid);
    this.ticketService.create(data)
      .subscribe(
        response => {
          console.log("city")
          console.log(response);
          this.submitted = true;
        },
        error => {
          console.log(error);
        });
  }
  //end

  retrieveEvents(): any {
    this.eventService.getAll()
      .subscribe(
        data => {
          this.events = data;
          console.log(data);
          return data;
        },
        error => {
          console.log(error);
          return error;
        });

  }
}

And it's template:

<div>
  <div *ngIf="currentTicket.id" class="edit-form">
    <h4>Билет</h4>
    <form>
      <div class="form-group">
        <label for="title">Количество</label>
        <input
          type="number"
          class="form-control"
          id="title"
          [(ngModel)]="currentUserTicket.qty"
          name="qty"
        />

        <input
          type="hidden"
          class="form-control"
          id="id"
          [(ngModel)]="currentUserTicket.ticketid"
         value="{{currentTicket.id}}"
          name="ticketid"
        />
      </div>

      <div class="form-group">
        <label for="title">Количество</label>
        <input
          type="number"
          class="form-control"
          id="paid"
          [(ngModel)]="currentUserTicket.paid"
          value="{{currentUserTicket.qty*currentTicket.price}}"
          name="paid"
        />


      </div>

      <div class="form-group">

        <p>Событие: {{currentTicket.eventid?.name}}</p>
        <p>Зал: {{currentTicket.eventid?.hallid?.name}}</p>
        <p>Город: {{currentTicket.eventid?.cityid?.name}}</p>





      </div>

    </form>



    <button
      type="submit"
      class="badge badge-success mb-2"
      (click)="saveOrder()"
    >
      Подтвердить
    </button>
    <p>{{ message }}</p>
  </div>

  <div *ngIf="!currentTicket.id">
    <br />
    <p>Нет доступа...</p>
  </div>
</div>

How to do it correctly? I tryed to use event on keyup as suggested. Getting the same error but on that event.

calculatePrice($event:any){
    this.currentUserTicket.paid= this.currentTicket.price * this.currentUserTicket.qty
  }

CodePudding user response：

In your template:

 <input type="number"
          class="form-control"
          id="title"
          [(ngModel)]="currentUserTicket.qty"
          name="qty"
          (keyup)="calculatePrice($event)"
        />

  <input
          type="number"
          class="form-control"
          id="paid"
          [(ngModel)]="currentUserTicket.paid"
          name="paid"
        />

And, in your ts file, add the function:

calculatePrice($event){
  this.currentUserTicket.paid= this.currentUserTicket.qty*this.currentTicket.price
}