@@ -148,3 +148,85 @@ export default class Login extends Component {
148148 }
149149}
150150```
151+
152+ ## Common Operations
153+
154+ ### Add Listeners
155+
156+ You can add subscriptions for listening the state changes in form.
157+ There are a total of five observables available currently:
158+
159+ #### valueChanges
160+ Emits an event every time when the control's value changes.
161+ #### stateChanges
162+ Emits an event every time when the control's state(value, touched, ...) changes.
163+ #### statusChanges
164+ Emits an event every time when the control's status(PENDING, INVALID, VALID, DISABLED) changes.
165+ #### onValueChanges
166+ Emits an event every time when the control's value is changed by onChange event i.e by user.
167+ #### onBlurChnages
168+ Emits an event every time when a blur event triggers on a control.
169+
170+ You can use these listeners to modify the form state dynamically based on the value of other controls.
171+
172+ Example:
173+
174+ #### Disable/Enable a control based on another control's value
175+
176+ ``` js
177+ class Form extends Component {
178+ myForm = {
179+ public: true ,
180+ images: [[]]
181+ }
182+ componentDidMount () {
183+ this .myForm .get (' public' ).valueChanges .subscribe ((value ) => {
184+ const imagesControl = this .myForm .get (' images' )
185+ if (value) {
186+ imagesControl .disable ()
187+ } else {
188+ imagesControl .enable ()
189+ }
190+ })
191+ }
192+ componentWillUnmount () {
193+ this .myForm .get (' public' ).valueChanges .unsubscribe ()
194+ }
195+ }
196+ ```
197+
198+ #### Set the value of a control based on another control's value
199+
200+ The following example ensures that one of the control's value must be ` true ` .
201+
202+ ``` js
203+ class Form extends Component {
204+ myForm = {
205+ showMeMen: true ,
206+ showMeWomen: true
207+ }
208+ componentDidMount () {
209+ const showMeMenControl = this .myForm .get (' showMeMen' ).unsubscribe ()
210+ const showMeWomenControl = this .myForm .get (' showMeWomen' )
211+
212+ showMeMenControl .valueChanges .subscribe ((value ) => {
213+ if (! value && ! showMeWomenControl .value ) {
214+ showMeWomenControl .setValue (true )
215+ }
216+ })
217+
218+ showMeWomenControl .valueChanges .subscribe ((value ) => {
219+ if (! value && ! showMeMenControl .value ) {
220+ showMeMenControl .setValue (true )
221+ }
222+ })
223+
224+ }
225+
226+ componentWillUnmount () {
227+ this .myForm .get (' showMeMen' ).valueChanges .unsubscribe ()
228+ this .myForm .get (' showMeWomen' ).valueChanges .unsubscribe ()
229+ }
230+ }
231+ ```
232+
0 commit comments