Изменения значения угловой реактивной формы

У меня есть группа форм ниже в моем 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 для поля gender, даже если пользователь изменит его значение.

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

angular angular-reactive-forms angular-changedetection
person Dhimant Bhensdadia    schedule 25.10.2019    source источник
comment
Вы выполняете вызов веб-API для сохранения при КАЖДОМ изменении значения? Значит, к тому времени, как я ввел Стива, ты уже пять раз пытался его сохранить?   -  person cmprogram    schedule 25.10.2019
comment
хотя какая разница? Что произойдет, если мы скажем, что пол мужской, затем пользователь изменит firstName, затем saveStudent() будет вызван с полом как male, затем пользователь изменит пол на female, хорошо, функция не будет вызвана, но если пользователь снова изменит firstName, тогда saveStudent() будет вызван с полом женщина?   -  person AJT82    schedule 26.10.2019

Ответы (2)


arrow_upward
3
arrow_downward

Это легко... узнайте о 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());
person Andrew Allen    schedule 25.10.2019

arrow_upward
0
arrow_downward

Вы можете перебирать ключи (с Object.keys()) в this.studentFormGroup.controls и вызывать valueChanges.subscribe() для каждого элемента управления, кроме элемента управления пола.

person rveerd    schedule 25.10.2019