我有一个奇怪的场景。我创建了一个小组件,允许用户输入一个值,然后递增/递减。
当用户退格时,我想让它重置为0。由于某种原因,如果它是0以外的任何数字,我按了退格,它会用0填充。但当它是0时,我按了退格,它会保持空白,而不是在它的位置上填充0。
下面是小的.ts文件
import { Component, Input, OnInit } from '@angular/core';
@Component({
selector: 'app-incrementer',
templateUrl: './incrementer.component.html',
styleUrls: ['./incrementer.component.scss'],
})
export class IncrementerComponent implements OnInit {
decrementOff: any
incrementOff: any;
@Input('value') value: any;
@Input('max') max: any;
@Input('min') min: any;
@Input('step') step: any;
@Input('heading') heading: any;
constructor() { }
ngOnInit() {
}
changed() {
// If the user decides to delete the number, we will set it to 0.
if (!this.value) {
this.value = 0;
}
}
}
于飞:
<div>
<ion-card style="background-color: white">
<ion-grid>
<ion-row>
<ion-col size="3"></ion-col>
<ion-col size="6" class="heading"> {{heading}}</ion-col>
<ion-col size="3"></ion-col>
</ion-row>
<ion-row>
<ion-col size="3" (click)="decrement()">
<ion-icon name="caret-down-circle"></ion-icon>
</ion-col>
<ion-col size="6">
<ion-input class="incrementer-field" type="tel" class="counter-field" [(ngModel)]="value"
(ionChange)="changed()" [readonly]="readonly"></ion-input>
</ion-col>
<ion-col size="3" disabled (click)="increment()">
<ion-icon name="caret-up-circle"></ion-icon>
</ion-col>
</ion-row>
</ion-grid>
</ion-card>
</div>
所以就像我说的,当它是0的时候,我按了退格键,它就留下空白。任何其他的数字和退格键,它会像预期的那样用0填充这个框。
1条答案
按热度按时间pdsfdshx1#
如果您的用例是始终将0作为输入字段中的最小值,那么我宁愿不允许用户删除0。因此,我建议这样做:
第一个
下面是一个简单的demo