Question

我的student.component.ts中有一个下面的表单组：

        // Init locals
        this.studentFormGroup = this._fb.group({
            firstName            : ['N/A', {updateOn: 'change'}],
            lastName             : ['N/A', {updateOn: 'change'}],
            address              : ['N/A', {updateOn: 'change'}],
            phone                : ['N/A', {updateOn: 'change'}],
            gender               : ['N/A', {updateOn: 'change'}],
            email                : ['N/A', {updateOn: 'change'}],
            city                 : ['N/A', {updateOn: 'change'}],
            country              : ['N/A', {updateOn: 'change'}],
        });

每次控制值更改时，我都会调用webapi并使用以下方式将其保存到数据库中。但是，尽管用户更改了值，但我不想在性别字段上调用webapi。

this.studentFormGroup.valueChanges.subscribe(() => this.saveStudentRecord());

这里是问题，上面的单行代码在每次控制值更改时调用 saveStudentRecord 。

但是正如我提到的那样，我不需要呼吁性别控制。

所以目前我确实按照以下方法更改每个控件的值

this.studentFormGroup.get('firstName').valueChanges.subscribe(() => this.saveStudentRecord());
this.studentFormGroup.get('lastName').valueChanges.subscribe(() => this.saveStudentRecord());
this.studentFormGroup.get('address').valueChanges.subscribe(() => this.saveStudentRecord());
..
..
and so on except **gender** field

但是有时候，如果我在一个页面中有更多控件，则必须编写许多语句以忽略一个字段。

是否可以通过以下方式忽略性别控制值的变化？

this.studentFormGroup.valueChanges.subscribe(() => this.saveStudentRecord());

Answer 1

这是小菜一碟...了解rxjs和可管道运算符。（代码未经测试）

this.studentFormGroup.valueChanges.pipe(
  distinctUntilChanged((prev, curr) => prev.gender !== curr.gender)), // don't emit value if gender changed
  debounceTime(500), // allow time between keystrokes (computers are too fast sometimes)
  takeUntil(this.destroyed$)
).subscribe(() => this.saveStudentRecord());

Answer 2

您可以遍历Object.keys()中的键（使用this.studentFormGroup.controls），并在每个控件除上为性别控件调用valueChanges.subscribe()。

角反应形式值变化

2 个答案: