Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Stop Valuechanges of formcontrol and the formgroup

Tags:

angular

I have a formgroup which has a formcontrol. I have subscribed the valuechanges event of both formgroup and formcontrol.With a button click i would like to disable and reset value of formcontrol without firing valuechanges so i have used emitEvent:false which doesnot fire the valuechanges of the formcontrol but valuechanges of the formgroup is fired.I have a sample plunker demo here https://plnkr.co/edit/cN2wROc7o16w52ZEPZgH?p=preview .Is this expected behavior or an issue.Can somebody guide me

  ResetAndDisable(){
    this.ParentGroup.controls['test'].reset(null,{emitEvent:false});
    this.ParentGroup.controls['test'].disable({emitEvent:false});
 }
 Enable(){
    this.ParentGroup.controls['test'].enable({emitEvent:false});
 }
like image 322
abhilash reddy Avatar asked Aug 12 '17 17:08

abhilash reddy


People also ask

What is the use of valuechanges method in form control?

Most of the time, there are some changes in our form controls, which are created using either FormGroup or FormControl. 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.

How to identify a single form control in the form group?

Every single form control in the form group is identified by name when initializing. FormControl is a class in Angular that tracks the value and validation status of an individual form control.

How do I ADD/UPDATE/remove controls in formgroup?

To add, update, or remove controls in FormGroup, use the following commands: addControl() adds a control and updates its value and validity removeControl() removes a control setControl() replaces an existing control

What is value changes in angular 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.


1 Answers

You can use a combination of emitEvent:false and onlySelf:true, where onlySelf:true ...

If onlySelf is true, this change will only affect the validation of this FormControl and not its parent component. This defaults to false.

So what you can do is then:

ResetAndDisable(){
  this.ParentGroup.get('test').reset(null,{onlySelf:true, emitEvent:false});
  this.ParentGroup.get('test').disable({onlySelf:true, emitEvent:false});
}
Enable(){
  this.ParentGroup.get('test').enable({onlySelf:true,  emitEvent:false});
}
like image 162
AT82 Avatar answered Nov 15 '22 06:11

AT82