Question

通常，我会这样声明输入类型（效果很好）：

<input [(ngModel)]="input1" type="number" placeholder="Working"/>

但是，我希望类型是动态的，因此我使用属性绑定[type]="objectType"。为了简化这个问题，我使用了[type]="'number'"。

<input [(ngModel)]="input2" [type]="'number'" placeholder="Not Working"/>

现在的问题是，每当我对input2进行更改时，它都会转换为字符串。 input1并非如此-它仍然是预期行为的数字。如何为类型使用属性绑定并阻止其转换为字符串？

StackBlitz

Answer 1

这是一个已知问题（请参阅问题#13243）。

一种简单的解决方法目前是为每种类型使用不同的输入：

@Input() public myInputType: string;

<input [(ngModel)]="value" type="number" *ngIf="myInputType === 'number'"/>
<input [(ngModel)]="value" type="text" *ngIf="myInputType === 'text'"/>
<!-- ... -->

Answer 2

这也是我遇到的一个已知错误，但是目前唯一的解决方案是手动转换输入值。

  logValues() {
    // Manually cast it as an integer (or float if need be)
    if (this.input2Type == 'number')
      this.input2 = parseInt(this.input2.replace(/[^\d]/g, ''));

    console.log('input1 =>', this.input1);
    console.log('input1 type => ', typeof(this.input1));
    console.log('input2 =>', this.input2);
    console.log('input2 type => ', typeof(this.input2));
  }

Answer 3

如果要动态更改字段的输入类型，可以尝试此操作。在您的html

中

<input [type]="value">
<button (click)="onClick()">Change</button>

在您的.ts文件中

value: string;
constructor(){
this.value = 'string';
}

onClick() {
  if (this.value == 'string') {
  this.value = 'number';
 }
else {
  this.value = 'string';
 }
}

角输入[type] =“'number'”始终导致值是字符串

3 个答案: