Угловые Реактивные Изменения Значения формы

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 и pipeable операторах. (Код не проверен)

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() для каждого элемента управления , за исключением для гендерного элемента управления.