Question

当用户移动到另一个字段时，我想在我的金额字段中应用货币格式，然后金额值将转换为货币格式，而当控件成为焦点时，货币格式将被删除。

我曾尝试过与hostlistner一起在自定义指令中绑定事件onblur和onfocus事件，但是我想要不创建自定义指令吗？

这是我的HTML代码。

<input type="text" formControlName="amount" />

在金额字段上，我想设置货币格式而不创建自定义指令。

是否可以不创建自定义指令？

Answer 1

Angular从 @ angular / common 提出了 Pipe 概念。 API。

专门为Currency实施的API的名称为 CurrencyPipe。请单击附件中的链接以获取详细说明。

回答您的问题，

您可以将CurrencyPipe直接用于Angular组件。请按照以下步骤操作。

将 CurrencyPipe 注册到Module下的相应angular（NgModule） Providers 中。请注意，应从 @angular/common
导入
```
@NgModule({
  declarations: [],
  imports: [],
  providers:[CurrencyPipe]
})
```

将CurrencyPipe实例注入到您的Angular（Ng） Component 中，并使用方法 transform 转换目标货币金额格式。

@Component({
  selector: 'selector-name',
  templateUrl: './design.html',
  styleUrls: ['./design.scss']
})
export class YourComponent implements OnInit {
    formGroup: FormGroup;
    constructor(private currencyPipe: currencyPipe, private formBuilder: FormBuilder){
    }
    ngOnInit() {
        const amount = 25.00;
        const amountInCurrencyFormated = this.currencyPipe.transform(amount);
        this.formGroup = this.formBuilder.group({
            amount: amountInCurrencyFormated
        });
    }
}

您的期望值： $ 25.00

如何在成角反应形式中设置输入值的货币格式？

1 个答案: