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

您可以尝试在输入中使用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; }

Answer 2

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