Question

在Angular中，有一种方法可以使Form值不同于显示的值？

例如，您实现了一个Angular FormInput，向用户显示值数字“ 3,567.56 $”。

<input formInputControl="price" money>

我希望伪指令money在调用FormGroup（）的form.get('price').value时返回值“ 3567.56”。

我尝试实现Control Value Accessor，但没有找到在显示的值和想要的值之间转换值的解决方案。

编辑1

我想实现一个指令，该指令将应用程序中的计算值标准化，并为用户（UX）提供可读的值。

Answer 1

因此，经过大量搜索和测试，我找到了解决方案。

在指令@HostListener('input', ['$event'])中，我实现了调用this.onChange(this.normalizeValue(el.value))。

对onChange的调用允许在规范化后更新值。

Answer 2

这是自定义管道的示例：

TS：

import { FormGroup, FormBuilder } from '@angular/forms';

myForm: FormGroup;

constructor(private fb: FormBuilder) { }

this.myForm = this.fb.group({
    'price': [null]
});

HTML：

<form [formGroup]="myForm">
    <input type="text" formControlName="price" [value]="myForm.get('price').value | myPipe">
</form>

PIPE：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
    name: 'myPipe'
})
export class MyPipe implements PipeTransform {
    transform(value: any): any {
        // example:
        return value ? value.replace('$', '') + '$' : null;
    }
}

Angular：有没有一种方法可以使Form值与显示的值有所不同？

2 个答案: