Question

我有一个我的反应形式输入，该输入使用货币管道。当我在不更改此价格值的情况下将表单重置为其初始值时，它将丢失格式。

如果我之前更改了货币值，则更新正确完成。

似乎Angular仅检查输入的值，而不检查显示的视图。我的意思是，如果我的价格是15，并且显示为15,00€，那么当我进行重置时，初始值是15，它没有变化。角度会更改值，但不会更改其显示方式。似乎Angular会检查15 === 15是否成立，并且假设这是正确的，它不会应用管道格式（即使使管道不纯净）。

所以我的解决方法是在重置之前检查价格值是否已更改。如果有，我可以顺利进行。但是如果没有，我需要使用patchValue，而没有价格。

这是我的重置方法：（我摆脱了注释，因为它们是西班牙语的）

reset(): void {
    if (this.clientDataForm.getRawValue().contract.price === this.initialValues.contract.price) {
        const values = JSON.parse(JSON.stringify(this.initialValues)); 
        delete values.contract.price;
        this.clientDataForm.patchValue(values);
        this.clientDataForm.markAsPristine();
    } else {
        this.clientDataForm.reset(this.initialValues);
    }
}

我想知道这是否是处理反应式管道的正确方法。我曾尝试直接在组件中使用管道，但由于它会修改值并在其中插入格式，因此对我来说似乎不对。

也许是相关的（尽管我不这么认为），但是我没有在模板中直接使用CurrencyPipe。我使用了一个自定义的dynamicPipe，它调用了currencyPipe，因此可以重用我的输入组件。我也有一个问题，因为我无法从喷油器中获得管道。至少我不知道该怎么做。因此，我不得不使用一个难看的开关来调用正确的管道。如果有人能指出正确的方向，我将不胜感激。

我的dynamicPipe：

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

@Pipe({
    name: 'dynamicPipe',
})
export class DynamicPipe implements PipeTransform {

    public constructor(private currency: CurrencyPipe) { }

    transform(value: any, pipeToken: string, pipeArgs: any[]): any {
        if (!pipeToken) {
            return value;
        } else {
            let pipe;

            // I have tried with the Injector but didn’t work
            switch (pipeToken) {
                case 'currency':
                    pipe = this.currency;
                    break;
            }
            return pipe.transform(value, ...pipeArgs);
        }
    }
}

我的输入组件html

<ng-container>
<mat-form-field class="seni-input-container" appearance="standard" floatLabel="always">
    <mat-label>{{ text.label }}</mat-label>
    <input 
        matInput
        [type]="type ? type : 'text'"
        [formControl]="controlContainer.control.controls[controlName]" 
        [value]="pipe ?
            (controlContainer.control.controls[controlName].value | dynamicPipe:pipe.token:pipe.args) :
            controlContainer.control.controls[controlName].value"
        [placeholder]="text.placeholder"
        [required]="hasRequiredField(controlContainer.control.controls[controlName])"
        [readonly]="readonly">
    <mat-error *ngIf="controlContainer.control.controls[controlName].errors">
        {{ utils.currentError(controlContainer.control.controls[controlName]) }}
    </mat-error>
    <mat-hint *ngIf="text.hint">{{ text.hint }}</mat-hint>
</mat-form-field>
</ng-container>

Angular-反应形式的格式输入值

0 个答案: