如何在 Angular 14 Reactive Forms 中使用 Pipe？

Question

我们使用 Angular Reactive Forms 和管道来格式化数据，这在 Angular 9 中运行良好，但升级到 14 后。我们不能再在 Angular Reactive Forms 中使用管道了吗？

期望是，如果用户输入像 123.45678 这样的值，我们需要四舍五入并加上“%”符号后缀，例如 123.457%

当用户尝试再次编辑（焦点）时，需要显示数据库值，例如 123.45678 在模糊或跳出时，需要再次转换，如 123.457%

此场景在 Angular 9 上运行良好，但升级到 14 后。

我在 stackblitz 中制作了样本。

Answer 1

您可以使假只读组件不与 formControl 链接 因此，从第二个输入中删除 formControlName 参数（只读）。

第二个建议是您可以从第一个输入中删除设置值

 [value]="loanFormGroup.get('interest')?.value"

因为它不影响反应控制

演示 - https://stackblitz.com/edit/angular-aw9cit-fkxxdu?file=src/app/app.component.html

Answer 2

尼基塔，干得好。我注意到的一件事是，单击返回编辑字段后需要单击两次焦点。我使用您的代码作为起点，但在切换视图然后设置焦点后添加了一个视图子级来访问该字段。

@ViewChild("maskedInput") maskedInput : ElementRef | undefined;

toggleToUnMaskedMode(state: boolean) {
    this.editMode = state;
    setTimeout(() => {
        state ? this.maskedInput?.nativeElement.focus() : null;
    }, 0);
}

我还意识到您不需要表单值来管理输入的状态，因此我只是使用一个属性来跟踪该状态。

editMode: boolean = true;

而不是（在你的 stackblitz 示例中）：

editInterest: new FormControl(false),