NgModel 不输出小数？

Question

我正在开发一个项目，用户希望在小数点处输入数字。如果用户输入

1.000

，我们希望持续

1.000

。我们使用 Angular 并利用模板驱动的表单。我们发现

NgModel

不会发出完整的数字 - 它总是被截断。因此，即使用户输入

1.000

，也只会发出

1

。如果用户输入

1.0001

，我们会看到正确的值。

令人好奇的是，如果我们订阅输入元素上的

change

或

keyup

事件，我们会看到预期值。

为什么

ngModelChange

发出的值与

keyup

或

change

不同？有没有办法让 Angular 发出预期的值？

我在这个 stackblitz 中整理了一个简单的示例

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [FormsModule],
  template: `
    <h3>Enter a value like "1.000"</h3>
    <!-- you can replace "keyup" with "change" and get the same problem -->
    <input type="number" [(ngModel)]="value" (ngModelChange)="onNgChange($event)" (keyup)="onJSChange($event)">

    <br><br><br>
    <span>From NgModel:</span>
    <div>{{fromNgModel}}</div>

    <span>From Change:</span>
    <div>{{fromChange}}</div>
  `,
})
export class App {
  name = 'Angular';
  value?: number = null;

  fromNgModel: any = null;
  fromChange: any = null;

  onNgChange(evt: any) {
    //typing or copy/pasting "1.000" into the input will yield "1"
    this.fromNgModel = evt?.toString();
  }

  onJSChange(evt: any) {
    //typing or copy/pasting "1.000" into the input will yield "1.000"
    this.fromChange = evt?.target?.value.toString();
  }
}

Answer 1

1.000 和 1 在 JavaScript 中是相同的。如果您打开 Chrome 控制台并输入“1.000”，它将打印“1”。

数字类型不记录额外的 0。

当您想要显示小数点后 3 位的数字时，请使用 Angular 数字管道：

valueVariable | number:'0.3-3'

对于表单字段，您可能需要拆分 ngModel 输入和输出。 通常，您可以使用 [(ngModel)] 来更新两个方向，但在这里您需要将它们分开，因为您需要不同的输入和输出值。

[ngModel]="valueVariable | number:'0.3-3' " (ngModelChange)="handleValueChange($event)"

在你的handleValueChange中设置valueVariable，这样就可以了。