Skip to content

Commit ec799f3

Browse files
author
Kuldeep Saxena
authored
Update GettingStarted.md
1 parent dc06112 commit ec799f3

File tree

1 file changed

+82
-0
lines changed

1 file changed

+82
-0
lines changed

docs/GettingStarted.md

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -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

Comments
 (0)