Angular reactive from after programmatically setting Value, the form remains in the same state until the end of the function

Question

Angular reactive from after programmatically setting Value, the form remains in the same state until the end of the function, I don't understand this:

 export class NewComponent {

   constructor(
      private fb: FormBuilder
   ){
   }

   profileForm = this.fb.group({
     name: ['', Validators.required]
   });


   onButtonClick(){
     this.profileForm.controls.topic.setValue('bla bla', {onlySelf: true});
     console.log(this.profileForm);
   }
 }

// FormGroup {validator: null, asyncValidator: null, _onCollectionChange: ƒ, pristine: true, touched: false, …}
// asyncValidator: null
// controls: {topic: FormControl, hidden: FormControl, title: FormControl, language: FormControl, description: FormControl, …}
// errors: null
// pristine: true
// status: "INVALID"
// statusChanges: EventEmitter {_isScalar: false, observers: Array(0), closed: false, isStopped: false, hasError: false, …}
// touched: false
// validator: null
// value: {title: ""}
// valueChanges: EventEmitter {_isScalar: false, observers: Array(0), closed: false, isStopped: false, hasError: false, …}
// _onCollectionChange: () => this._updateDomValue()
// _onDisabledChange: []
// dirty: (...)
// disabled: (...)
// enabled: (...)
// invalid: (...)
// parent: (...)
// pending: (...)
// root: (...)
// untouched: (...)
// updateOn: (...)
// valid: (...)
// __proto__: AbstractControl

As you can see "value" still has {title: ""} controls.title.value has indeed changed but not value.

How do you make the changes persist? is the a "push()" of some sort? why is value not set and how do I correctly make it set?

because when you type into the form field the "value" object is updated as well and this one is the one you use to consult the state and is more appropriate for getter use-cases.

Not sure but maybe using the "patchValue" method could work - see there — Simrugh
– Simrugh, Commented Sep 19, 2019 at 12:22
yeah I've since found that out see my answer, do you have an idea of why I shouldn't use both together? — tatsu
– tatsu, Commented Sep 19, 2019 at 12:23
The doc says that you should use setValue when you want to update an individual control while patchValue will re-evaluate the entirety of the form. I guess patchValue is better for complex forms — Simrugh
– Simrugh, Commented Sep 19, 2019 at 12:30

Kirill Simonov · Accepted Answer · 2019-10-22 19:22:03Z

2

If you look closely the difference is the onlySelf property. The form value is not updated when we set the property to true but the control value is updated as expected.

I have demonstrated the behavior in the following snippet.

this.surveyForm.controls.surveyTitle.setValue('without self');
console.log('Control value: ', this.surveyForm.controls.surveyTitle.value);
console.log('Form value: ', this.surveyForm.value);
console.log('-------------------');
this.surveyForm.controls.surveyTitle.setValue('with self', {onlySelf: true});
console.log('Control value: ', this.surveyForm.controls.surveyTitle.value);
console.log('Form value: ', this.surveyForm.value);

Here is the ouput-

edited Oct 22, 2019 at 19:22

Kirill Simonov

8,4913 gold badges23 silver badges47 bronze badges

answered Sep 19, 2019 at 12:49

Rajesh Panda

6556 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Martijn Over a year ago

Please copy output as text and paste into a code block instead of using screenshots next time.

tatsu · Accepted Answer · 2019-09-19 12:22:25Z

Okay this is something that

all somehow omit...

this :

    this.profileForm.controls.name.setValue('bla bla', {onlySelf: true});

changes only the controls,

this :

    this.profileForm.patchValue({'name': 'bla bla'});

changes both the controls and the value.

but somehow setValue is supposed to be "cleaner"...

I'm going to use the latter alone for now but I'd like to know what are the advantages/disadvantages to using both in conjunction when you want to programatically change form?

Collectives™ on Stack Overflow

Angular reactive from after programmatically setting Value, the form remains in the same state until the end of the function

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related