angular - 数值形式输入限制为最大值并用它来计算第二个字段

Question

我是 Ionic 的新手，我已经开始使用 Ionic 4。我需要做的是以下内容，我有一个向用户显示 3 个字段的表单：

• 第一个（acumulados）是只读的，用户可以看到他们迄今为止赢得的积分。
• 2nd (puntoscanje) 是用户想用他们输入的数值换取金钱的点数。
• 第三个（descuento）是只读字段，在后台，用户输入的积分数量将计算他们将要兑换积分的钱。

我的问题是，我在 html 中使用 DOM 使用 javascript 函数完成了这项工作，但我读过它不建议这样做，所以我试图让它与 ionic 和 angular 一起使用。

这是示例 javascript 代码：

<script>
function myFunction() {
  if (document.getElementById("puntoscanje").value > <?php echo $puntos ?> ) {
    document.getElementById("puntoscanje").value = <?php echo $puntos ?>;   
  }
  var puntoscanje = document.getElementById("puntoscanje").value;
  var PuntosDescto = <?php echo $PuntosDescto ?> ;
  document.getElementById("descuento").value = (puntoscanje / PuntosDescto).toFixed(2);
}
</script>

在我输入名为“puntoscanje”的表单中，用户可以修改此字段输入一个数字，我需要((ionChange))在字段中完成更改后检查用户设置的数字，然后计算第二个字段，我正在尝试用一个函数来设置值但是，有时它工作，有时它不工作。例如：

如果最大值是 170，并且用户记下 200，它会像这样验证每个数字：

2>170 = doesn't change
20>170 = doesn't change
200>170 = changes and it sets the value to 170 (the max value).

但是，如果我先输入输入 170，然后输入另一个数字，如 1702，依此类推，它不会改变。

页面 ts

    import { Component, OnInit } from '@angular/core';
    import { Storage } from '@ionic/storage';
    import { GetService } from '../../get.service';

    @Component({
      selector: 'app-canjepuntos',
      templateUrl: './canjepuntos.page.html',
      styleUrls: ['./canjepuntos.page.scss'],
    })
    export class CanjepuntosPage implements OnInit {
      points: any;
      puntoscanje: any;
      descuento: any;
      pcanje: any;

      constructor(private storage: Storage,) { 
        this.storage.get('Puntos').then((val) => {
          this.points = parseInt(val);
          //console.log('Your Name is', val);
        });
       }
      myFunction() {
        console.log(this.puntoscanje);
        if( this.puntoscanje > this.points){
          this.puntoscanje = this.points;
        }
          var PuntosDescto = 10 ;
          var calculo = ( this.puntoscanje / PuntosDescto).toFixed(2);
          this.descuento = calculo;        
      }
      ngOnInit() {
      }
    }

模板：

    <ion-header>
      <ion-toolbar color="dark">
        <ion-buttons slot="start">
          <ion-menu-button></ion-menu-button>
        </ion-buttons>
        <ion-title>Canje de Puntos</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content padding>
      <form  #form="ngForm" (ngSubmit)="register(form)">
        <ion-grid>
          <ion-row justify-content-center>
            <ion-col align-self-center>
              <div padding class="form-inputs">
                <ion-item  >
                    <ion-label position="stacked" style="text-align: center;">Puntos Acumulados</ion-label>
                    <ion-input type="text" name="acumulados" [(ngModel)]="acumulados" value="{{points}}" readonly style="text-align: center;"></ion-input>
                </ion-item>

                <ion-item>
                  <ion-label position="stacked" style="text-align: center;">Puntos a Canjear</ion-label>
                  <ion-input type="number" inputmode="numeric" id="puntoscanje" name="puntoscanje" autofocus="true" [(ngModel)]="puntoscanje" style="text-align: center;" min="0" max="{{points}}" (ionChange)="myFunction()" ></ion-input>
                </ion-item>

                <ion-item>
                  <ion-label position="stacked" style="text-align: center;">descuento</ion-label>
                  <ion-input type="number" inputmode="numeric" id="descuento" name="descuento" [(ngModel)]="descuento" style="text-align: center;" max="{{points}}" ></ion-input>
                </ion-item>


              </div>
              <div style="padding-top:100px">
              <ion-button style="width:150px; height: 50px; margin: auto; " expand="block" (click)="Login()" >Canjear</ion-button>
              </div>
            </ion-col>
          </ion-row>
        </ion-grid>
        </form>
    </ion-content>

在此先感谢大家

标签： angularionic-frameworkionic3ionic4

Answer 1

你可以做的是有点手工工作。只需防止默认事件，并处理数字。

像这样的东西可以解决问题：

import { Component, OnInit } from '@angular/core';
import { Storage } from '@ionic/storage';
import { GetService } from '../../get.service';

@Component({
  selector: 'app-canjepuntos',
  templateUrl: './canjepuntos.page.html',
  styleUrls: ['./canjepuntos.page.scss'],
})
export class CanjepuntosPage implements OnInit {

points: any;
puntoscanje: any = 0; //You need to initialize a value for puntoscanje
descuento: any;
pcanje: any;


  constructor(private storage: Storage,) { 
    this.storage.get('Puntos').then((val) => {
      this.points = parseInt(val);
      //console.log('Your Name is', val);
    });
   }



   myFunction(event) {
     event.preventDefault();
     this.puntoscanje = Number(`${this.puntoscanje}${event.key}`)
     if (isNaN(this.puntoscanje)) {
       this.puntoscanje = 0;
     }
     if( this.puntoscanje >= this.points){
       this.puntoscanje = this.points;
     }
     var PuntosDescto = 10 ;
     var calculo = ( this.puntoscanje / PuntosDescto).toFixed(2);
     this.descuento = calculo;
   }

 }

模板

 <ion-header>
  <ion-toolbar color="dark">
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>Canje de Puntos</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <form  #form="ngForm" (ngSubmit)="register(form)">
    <ion-grid>
      <ion-row justify-content-center>
        <ion-col align-self-center>
          <div padding class="form-inputs">
            <ion-item  >
                <ion-label position="stacked" style="text-align: center;">Puntos Acumulados</ion-label>
                <ion-input type="text" name="acumulados" [(ngModel)]="acumulados" value="{{points}}" readonly style="text-align: center;"></ion-input>
            </ion-item>

            <ion-item>
              <ion-label position="stacked" style="text-align: center;">Puntos a Canjear</ion-label>
              <<ion-input type="number" inputmode="numeric" id="puntoscanje" name="puntoscanje" autofocus="true" [(ngModel)]="puntoscanje" style="text-align: center;" min="0" max="{{points}}" (keypress)="myFunction($event)" ></ion-input>
            </ion-item>

            <ion-item>
              <ion-label position="stacked" style="text-align: center;">descuento</ion-label>
              <ion-input type="number" inputmode="numeric" id="descuento" name="descuento" [(ngModel)]="descuento" style="text-align: center;" max="{{points}}" ></ion-input>
            </ion-item>


          </div>
          <div style="padding-top:100px">
          <ion-button style="width:150px; height: 50px; margin: auto; " expand="block" (click)="Login()" >Canjear</ion-button>
          </div>
        </ion-col>
      </ion-row>
    </ion-grid>
    </form>
</ion-content>