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

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

2 个答案: