Help with inputs and typescript

Ionic Framework Ionic Angular
1

I feel like this is more of a typescript question but I’m not sure. And just a disclaimer, I have little to no experience with typescript, so this might be the source of the problem.
So, I created two inputs for the type number like so:

<ion-item>
          <ion-label>Quantidade</ion-label>
          <ion-input type="number" [(ngModel)]="todo.quantidade" name="quantidade"></ion-input>
</ion-item>
<ion-item>
          <ion-label>Preço</ion-label>
          <ion-input type="number" [(ngModel)]="todo.preco" name="preco"></ion-input>
</ion-item>

And the typescript file looks like this:

import { Component } from '@angular/core';
import { Camera, CameraOptions } from '@awesome-cordova-plugins/camera/ngx';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  imgURL = '';

  public todo = {categoria: String, quantidade: 0, preco: 0};

  public total = 0;
  public quantidadeTotal = 0;

  constructor(
    private camera: Camera
  ) {}

  getCamera() {
    this.camera.getPicture().then((res)=>{
      this.imgURL = res;
    }).catch(e => { 
      console.log(e);
    })
  }

  logForm() {
    console.log(this.todo);
    this.updateTotal();
    console.log(this.total);
  }

  updateTotal() {
    this.total += this.todo.preco * this.todo.quantidade;
    this.quantidadeTotal += this.todo.quantidade;
  }

}

And when I go to look at the input by default it looks like this:
image

For some reason it already starts with the value that was instanciated inside of the typescript file, I’m not sure how I can work around this. I would like the input to only have a placeholder.

Thanks.

2

Hi, the key point is at this line:

public todo = {quantidade: 0, preco: 0};

You can change this line to:

public todo = {quantidade: null, preco: null};

This will make the input element won’t have the initial value, thus it can display the placeholder.

Before:

before
before2746×992 257 KB

After:

after
after2730×1000 270 KB

I make a stackblitz playground (Ionic input placeholder and typescript - StackBlitz), so you can see these changes in actions, hope this is helpful :smile: