我在 Angular 7 中使用 reactive forms。
我有许多依赖于其他字段的字段。
我对@987654322@或this.form.get("control_name").valueChanges应该使用什么感到好奇？
例如。如果两者都适用于输入，那么我想知道它们之间的区别、优缺点。
哪个性能更好？
【问题讨论】：
标签： angular reactive-programming angular-reactive-forms angular-forms angular-observable
让我们考虑一下，您正在寻找的是在 type="text" 的 input 标签上收听更改
valueChanges的情况下
由于它是一个 Observable，它会以一个新值触发。此值将是 input 字段的更改值。要收听它，您必须将subscribe 发送到valueChanges Observable。像这样的：
this.form1.controls['name'].valueChanges.subscribe(change => {
console.log(change); // Value inside the input field as soon as it changes
});
(change)事件的情况在change 事件的情况下，对于input 标记，change 事件只有在您blur 离开该input 字段时才会触发。此外，在这种情况下，您将获得 $event 对象。从那个$event 对象中，您必须提取字段值。
所以在代码中，这看起来像这样：
import { Component } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';
@Component({...})
export class AppComponent {
name = 'Angular';
form1: FormGroup;
form2: FormGroup;
constructor(private fb: FormBuilder) {}
ngOnInit() {
this.form1 = this.fb.group({
name: [],
email: []
});
this.form2 = this.fb.group({
name: [],
email: []
});
this.form1.controls['name'].valueChanges.subscribe(change => {
console.log(change);
});
}
onForm2NameChange({ target }) {
console.log(target.value);
}
}
在模板中：
<form [formGroup]="form1">
<input type="text" formControlName="name">
<input type="text" formControlName="email">
</form>
<hr>
<form [formGroup]="form2">
<input type="text" formControlName="name" (change)="onForm2NameChange($event)">
<input type="text" formControlName="email">
</form>
这里有一个Working Sample StackBlitz 供您参考。
注意：这完全取决于您的用例，哪个更合适。
对于您的特定用例，我建议使用 RxJS 运算符来完成工作。像这样的：
zipCodeFormControl
.valueChanges
.pipe(
debounceTime(500),
distinctUntilChanged(),
switchMap(
zipcode => getAddressFromZipcode(zipcode)
),
map(res => res.actualResult)
)
.subscribe(addressComponents => {
// Here you can extract the specific Address Components
// that you want to auto fill in your form and call the patchValue method on your form or the controls individually
});
【讨论】：
(change) 会更好，因为它只有在您离开场地时才会被调用 blur。但又一次。没有更具体的例子，很难确定。也许创建一个可以突出您面临的问题的示例，也许我可以提供更好的建议。
这是个案，但我发现复选框和单选按钮（true/false 类型控件）与（更改）处理程序配合使用效果更好，输入和文本字段通常更适合 valueChanges。
虽然我不确定性能，但我认为这将是处理此决定时的理想用例。
valueChanges（适用于所有内容）的一个很好的用例是具有大量 ngIf 逻辑的复杂表单。有时这些表单需要值更改的“连锁反应”才能正常工作，在这种情况下，（更改）处理程序将无用
【讨论】：
如果是输入（文本）字段，我建议根据您的用例使用changeValues 或value：
changeValues。change。不过，这只是一个经验法则，魔鬼在细节中。
这是我在进行自己的研究/测试时编写的一个工作示例的代码，为了比较，它实现了这两种方法：
【讨论】：