Angular 6 形式 - 在 ValueChanges 后改变值

Question

我的目标是在每次值更改后改变名称值。（在我的例子中，删除名称值中所有不必要的空格）我有一个简单的表格：

this.form = this.fb.group({
    name: new FormControl(''),
    description: new FormControl(''),
});

HTML

<form [formGroup]="form">
    <input formControlName="name">
    <input formControlName="description">
</form>

逻辑

this.form.valueChanges.subscribe(data => {
    const newName = 'some mutated name';
    this.form.patchValue({
        ...this.form.value,
        name: newName,
    });
    // triggers an infinite loop
});

...但这会触发无限循环

Answer 1

通过在触发 valueChanges 事件后更改表单中的一个值，您实际上是在强制一次又一次地调用同一事件，这就是您获得循环的原因。

Answer 2

您可以尝试在输入中使用 keyup 事件：

<input (keyup)="onKey($event)">

然后像这样修改字符串

onKey(event: any) { // something like this // check event.target.value for the values and modify as needed this.name = newName; }

Angular 6 形式 - 在 ValueChanges 后改变值

Angular 6 Form - Mutate Value after ValueChanges

angular

typescript

angular6

angular-forms