Angular航班价格输入框开发求助：合规校验与格式化需求

问题分析 #

当前代码中[(ngModel)]双向绑定与(ngModelChange)同时使用会导致赋值冲突，双向绑定内部已包含ngModelChange的处理逻辑，手动修改this.content后会被覆盖，因此输入文本无变化。此外，现有的filterContent仅做简单字符替换，未实现需求中的输入限制与格式化规则。

解决方案 #

1. 调整模板绑定方式 #

拆分双向绑定语法糖，手动控制值的更新，避免逻辑冲突：

<form>
  <input type="text" matInput [ngModel]="content" name="content" (ngModelChange)="filterContent($event)" />
</form>

2. 实现完整的输入过滤与格式化逻辑 #

修改filterContent方法，覆盖所有需求规则：

• 过滤非法字符，仅保留数字、单个点和合法逗号
• 限制最多两位小数
• 处理前导零与开头的点（如.01转为0.01）
• 为数值自动添加千位分隔符

修改后的example.component.ts代码：

import { Component, Inject, OnInit } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
import { DialogData } from 'src/app/model/dialog-data';

@Component({
  selector: 'app-example-dialog',
  templateUrl: './example-dialog.component.html',
  styleUrls: ['./example-dialog.component.scss']
})
export class ExampleDialogComponent implements OnInit {
  content: string = '';

  constructor(
    public dialogRef: MatDialogRef<ExampleDialogComponent>,
    @Inject(MAT_DIALOG_DATA) public data: DialogData) { }

  ngOnInit() {
  }

  onNoClick(): void {
    this.dialogRef.close();
  }

  filterContent(input: string): void {
    // 过滤非法字符，仅保留数字、点、逗号
    let cleaned = input.replace(/[^0-9.,]/g, '');
    
    // 先移除所有逗号，后续统一添加合法分隔符
    const numericRaw = cleaned.replace(/,/g, '');
    
    // 限制最多两位小数
    const [integerRaw, decimalRaw] = numericRaw.split('.');
    let processedDecimal = decimalRaw ? decimalRaw.slice(0, 2) : '';
    
    // 处理前导零与开头的点
    let processedInteger = integerRaw;
    if (processedInteger.startsWith('0') && processedInteger.length > 1 && !numericRaw.startsWith('0.')) {
      processedInteger = processedInteger.replace(/^0+(?=\d)/, '');
      processedInteger = processedInteger || '0';
    }
    if (numericRaw.startsWith('.')) {
      processedInteger = '0';
    }
    
    // 添加千位分隔符
    const formattedInteger = processedInteger.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
    
    // 拼接最终结果
    this.content = processedDecimal ? `${formattedInteger}.${processedDecimal}` : formattedInteger;
  }
}

功能验证 #

针对需求中的示例场景：

• 有效输入处理：
  • 000123456.1 → 123,456.1
  • 12344546.01 → 12,344,546.01
  • 0 → 0
  • 00000.1 → 0.1
  • 00.01 → 0.01
  • .01 → 0.01
• 无效输入自动修正：
  • .001 → 0.00
  • 000.001 → 0.00
  • ,01 → 1
  • 1231321,1231 → 12,313,211,231

说明 #

• 先过滤非法字符再处理格式，确保输入始终符合规则
• 千位分隔符正则仅对整数部分生效，避免干扰小数位
• 代码完全兼容Angular 7版本，无需额外依赖

内容的提问来源于stack exchange，提问作者Tam Do