角反应形式：变化与价值变化

Question

我在Angular 7中使用了反应形式。

我有很多字段都依赖于其他字段。

我对应该使用(change)或this.form.get("control_name").valueChanges使用什么感到好奇？

例如两者都将在输入上起作用。我想知道它们之间的优缺点。

哪个表现更好？

Answer 1

让我们考虑一下，您正在寻找的是听input的{​​{1}}标签上的更改

如果是type="text"

由于它是可观察的，因此将使用新值触发。该值将是valueChanges字段的更改值。要收听它，您将必须input到subscribe可观察的位置。像这样：

valueChanges

如果发生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

---

  

这是您推荐的Working Sample StackBlitz。

---

注意：这完全取决于您的用例，哪个更合适。

---

更新：

对于您的特定用例，我建议使用RxJS运算符完成工作。像这样：

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);
  }

}

Answer 2

这是视情况而定的，但是我发现复选框和单选按钮（真/假类型控件）之类的东西与（更改）处理程序配合使用更好，并且输入和文本字段通常更适合valueChanges。

尽管我不确定性能，但我认为这是处理此决定时的理想用例。

valueChanges（适用于所有内容）的一个好用例是具有许多ngIf逻辑的复杂形式。有时，这些形式需要值更改的“链式反应”才能正常工作，在这种情况下，（更改）处理程序将毫无用处

Answer 3

在输入（文本）字段的情况下，我建议根据您的使用情况使用changeValues或value：

• 如果您要实现类似于“ Google的自动完成功能”的功能，即在键入时提供（搜索）建议→然后使用changeValues。
• 对于其他每种情况，我都会使用change。

这只是一个经验法则，但是细节决定成败。

这是我在进行自己的研究/测试时编写的一个有效示例的代码，为比较起见，它实现了这两种方法：

• component HTML file
• component TypeScript file