angular - 我如何以 Angular-formly 格式化一个值

Question

只有在模糊之后，我才必须将输入值从数字转换为货币。但是我只能在console.log中写，难道不能在视图中写回吗？

查看演示 并打开控制台。写下任何数字，你就会看到转换器做了什么。我需要输入字段中的值。

Answer 1

解决方案是创建使用以下选项之一的自定义字段类型：

1. ngx-currency https://stackblitz.com/edit/ngx-formly-custom-template-ol5cs9
2. ngx-mask
3. 依赖于的自定义指令ControlValueAccessor：https ://stackblitz.com/edit/angular-hv7mnc

Answer 2

我是通过以下方式做到的，我们可以在 templateOptions 下使用 blur 事件

templateOptions: {
                                    label: 'Minimum Value',
                                    placeholder: 'Minimum Value',
                                    type: 'text',
                                    keydown: (field, $event) => {
                                        return ValidateNumericChars(field, $event);
                                    },
                                    focus: (a, event) => {
                                        event.target.value = Number(event.target.value.replace(/[^0-9.-]+/g, ""));
                                    },
                                    blur: (a, event) => {
                                        event.target.value = this.utility.formatCurrency(event.target.value);
                                    }
                                },

Answer 3

这对我有用：

 {
    key: 'scorePoints',
    type: 'input',
    templateOptions: {
      label: 'Points',
      placeholder: 'Insert Points',
      type: 'number',
      required: false,
      allowedKeys: '[0-9]',
    }
  }

这允许用户仅输入数字，尽管当我收到模型的值时，我将其作为字符串获取，将其转换为数字就足够了。

但是，如果您想收到一个数字，最好初始化模型。

将对象字段设置为 0 已经强制该字段以数字形式返回。

form = new FormGroup({});
model : MyFormInterfaceModel ={
    levelName:'Level 1',
    scorePoints:0
  };