Angular Reactive Form Value Changes

Question

I have a below form group in my 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'}],
        });

on every control value changes, I do call a webapi and save it to database using the following way. But I don't want to call webapi on gender field though user change its value.

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

Here the problem is the above single line code call saveStudentRecord on every control value change.

But as I mentioned I don't need to call for gender control.

so currently I do follow the below way for value changes for each control

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

But sometime if I have more controls in a single page I have to write these many statements to just ignore one field.

Is it possible to ignore the gender control value change using the following way?

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

You do a web api call to save, on EVERY value change? So by the time I've typed in "Steve" you've attempted to save it 5 times? — cmprogram
– cmprogram, Commented Oct 25, 2019 at 12:53
what is the difference though? What happens if we say that gender is male, then user changes firstName, then saveStudent() is called with gender as male, then user changes gender to female, ok, function is not called, but if user again changes firstName then saveStudent() is called with gender female? — AVJT82
– AVJT82, Commented Oct 26, 2019 at 19:15

Andrew Allen · Accepted Answer · 2019-10-25 13:11:38Z

3

This is a piece of cake...learn about rxjs and pipeable operators. (Code not tested)

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

answered Oct 25, 2019 at 13:11

Andrew Allen

8,1917 gold badges38 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

rveerd · Accepted Answer · 2019-10-25 13:02:15Z

0

You can iterate over the keys (with Object.keys()) in this.studentFormGroup.controls and call valueChanges.subscribe() on each control except for the gender control.

answered Oct 25, 2019 at 13:02

rveerd

4,0661 gold badge16 silver badges36 bronze badges

Collectives™ on Stack Overflow

Angular Reactive Form Value Changes

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related