Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I listen to valueChanges and setValue of a AbstractControl in reactive forms

I am new to Angular and I have a Reactive Forms with AbstractControl that subscribe for valueChange to listen for any values change in input field. Inside the subscribed function I want to change the value of the input under a certain condition.

this.abstractControl.valueChanges.subscribe(data => {
...
   if(.....) {
       this.formGroup.patchValue({
           name: result
       )}
    }
...
}

I tried to use this.abstractControl.setValue(result) does'nt work too.

I get an error in setting the value.

ERROR RangeError: Maximum call stack size exceeded

What is the recommended way of listening to a value change and changing the value accord to a condtion?

like image 946
Danaley Avatar asked Nov 27 '17 07:11

Danaley


People also ask

How do you use ValueChanges?

The ValueChanges is an event raised by the Angular forms whenever the value of the FormControl, FormGroup or FormArray changes. It returns an observable so that you can subscribe to it. The observable gets the latest value of the control. It allows us to track changes made to the value in real-time and respond to it.

How do you check if any control in a reactive form has value in Angular 2?

Here's a quick way you can do this check using Object. keys(). This will check the properties in the value object that represents your form state, and return true if any of those properties are truthy, i.e. have a value.

How do I change value in reactive form?

Setting or Updating of Reactive Forms Form Control values can be done using both patchValue and setValue. However, it might be better to use patchValue in some instances. patchValue does not require all controls to be specified within the parameters in order to update/set the value of your Form Controls.

How do I get the latest value from a reactive form?

These reactive form instances like FormGroup and FormControl have a valueChanges method that returns an observable that emits the latest values. You can subscribe to valueChanges and perform your app logic over there. Let’s take a very simple example of valueChanges in our reactive form.

What is the use of value changes in form control?

FormControl. The ValueChanges is an event raised by the Angular forms whenever the value of the FormControl, FormGroup or FormArray changes. It returns an observable so that you can subscribe to it. The observable gets the latest value of the control.

What is the use of valuechanges method in react forms?

These reactive form instances like FormGroup and FormControl have a valueChanges method that returns an observable that emits the latest values. You can subscribe to valueChanges and perform your app logic over there.

What is the use of statuschanges property of abstractcontrol?

statusChanges is a property of AbstractControl that emits an event every time when the validation status of the control is recalculated. statusChanges property is available in FormControl, FormArray and FormGroup classes because they inherit AbstractControl class. statusChanges property has been declared as following.


1 Answers

@jonrsharpe thanks. Problem resolved with emitEvent: false.

Read: angular.io/api/forms/FormControl#setValue

like image 190
Danaley Avatar answered Nov 15 '22 08:11

Danaley