Angular 2 - too many observables to subscribe in ngOnInit()

Question

I have a huge model-driven form which it's fields may affect each other's behavior, For example:

If value of field A changes, Value of field B should be obtained from server,Or if value of field C changes, Field D should be disabled & etc.

In order to detect the changes I use valueChanges:

this.form.controls['a'].valueChanges.subscribe(data=>{
    //do some staff
});
this.form.controls['b'].valueChanges.subscribe(data=>{
    //do some staff
});
.
.
.

(Note that I can't say this.form.valueChanges because my form has about 50 fields). Everything looks fine but this approach makes my ngOnInit() a little messy. My question is:

Is there any better/more efficent solution for situations like this?Subscribing too many observables in ngOnInit doesn't make any problems?How can I improve my code?

Answer 1

It will be cleaner to use angular event binding on the template. Combine that with ngModel for bidirectional data-binding, and it can make your component code much cleaner.

For example:

<input type="text" formControlName="a" [(ngModel)]="inputValue" (change)="doSomething($event)">

You can do event binding in Angular2 for DOM events like change, click, keyup, blur etc.

Edit:

• change gets fired only on clicking outside the input textbox.
• keyup is a better option compared to change.

See this Plunk to compare the difference.