根据位置找出给定数字的小数分隔符

Question

我正在开发一个 Angular 反应式表单，它包含一个输入字段，该字段应该只允许一个与本地小数分隔符匹配的小数分隔符。

例如，如果locale == en，它应该只允许一个点作为分隔符。但是，如果locale == pt，它应该只允许使用逗号。为了知道应该允许什么locale，我提供了用户的语言。请注意，无论使用何种分隔符，在保存之前都应将值转换为标准英文点。

首先我尝试使用(keyup) 事件映射键盘输入。但是，在测试它时，我得到了一个 KeyboardEvent.key == 229 ("Unidentified") 结果，这不符合我的预期。

然后我转到下一个选项，将映射输入值以查找它是否有小数分隔符。可悲的是，它对我试过的both cases 不起作用。对于第一个，我收到了 Property ‘formatToParts’ does not exist on type ‘NumberFormat’ 的消息，而对于第二个，我没有像我预期的那样带上分隔符。

由于我的选项不多了，所以我想在这里问一下：有没有办法根据语言环境找出使用的十进制运算符？如何避免输入不允许的字符，例如，立即将其删除？我希望有人可以帮助我。

谢谢！

form.html

<form [formGroup]="form" (ngSubmit)="onSubmit()">
    <ion-list class="contact-box" padding>
        <ion-item>
            <ion-label stacked>Total Area: 
                <span class="required-mark">*</span>
            </ion-label>
            <ion-input type="number" formControlName="total_area" min="0" (ionChange)="handleLocaleDecimalSeparator($event)"></ion-input>
        </ion-item>
    </ion-list>
    <ion-list padding>
        <button ion-button type="submit" class="btn-rounded-full" [disabled]="!form.valid">Save</button>
    </ion-list>
</form>

form.ts

export class EditFarmPage {
  form: FormGroup;
  property: any = {};
  user: any = {
   name: string = 'José',
   language: string = 'es'
  }

  constructor(private fb: FormBuilder) {
     this.form = this.fb.group({
      total_area: [this.property.totalarea, Validators.compose([Validators.required, Validators.pattern(ValidatorService.onlyNumbersValidator())])],
    });
  }

  handleLocaleDecimalSeparator(event): any {
    //TODO: should do the trick
  }
}

Answer 1

您可以创建自定义表单控件。 这可能会有所帮助https://blog.thoughtram.io/angular/2016/07/27/custom-form-controls-in-angular-2.html

Answer 2

另一种方法是您可以使用@rxweb/reactive-form-validators 的数字验证器，它提供带语言环境支持的十进制。 我在数字验证器中设置了isFormat 和allowDecimal true，isFormat 用于根据语言环境格式化货币值，allowDecimal 允许该值是十进制。

这里是组件 ts 代码：

  ngOnInit() {
        this.form = this.fb.group({
      total_area: [this.property.totalarea,
        RxwebValidators.compose(
          {validators:
          [RxwebValidators.required(),
          RxwebValidators.numeric({allowDecimal:true,isFormat:true})],
          })]
    });
    } 

请参考这个工作示例Stackblitz