Angular Reactive Form Programmatic Setter

Question

I have an Angular Reactive Form with validation. What's the proper way to invoke the setter for my hiddenComposedField?

component.ts

ngOnInit() {
  this.myForm = this.formBuilder.group({
    'field1': ['', [Validators.required]],
    'field2': ['', [Validators.required]],
    'hiddenComposedField': [''],
  });

  this.myForm.get('field1').valueChanges.subscribe((val) => {
     this.setHiddenComposedField();
  });
  this.myForm.get('field2').valueChanges.subscribe((val) => {
     this.setHiddenComposedField();
  });
}

setHiddenComposedField() {
    let field1 = this.myForm.get('field1').value;
    let field2 = this.myForm.get('field2').value;

    // This doesn't work, but I want something like it:
    this.myForm.set('hiddenComposedField',field1 + ' ' + field2); // :(
}

component.html

<form [formGroup]="myForm">
  <input formControlName="field1">
  <input formControlName="field2">
  <!-- NB: hiddenComposedField is not exposed to the user; -->
  <!--     it is only on the submitted form model. -->
  <button type="submit">Submit</button>
</form>

Armin Smajovic · Accepted Answer · 2017-09-12 21:29:46Z

4

Something like this should work so that you are getting the Control first and then setting its value.

this.myForm.get('hiddenComposedField').setValue(field1 + ' ' + field2);

answered Sep 12, 2017 at 21:29

Armin Smajovic

562 bronze badges

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

Comments

user2243747 · Accepted Answer · 2019-06-23 07:34:45Z

0

Slightly different way using string interpolation

setHIddenField(){
 const field1 = this.myForm.get('field1').value;
 const field2 = this.myForm.get('field2').value;
 const separator= ' --- ';
 let result = `${field1} ${separator} ${field2}`;
 this.myForm.get('hiddenComposedField').setValue(result);
}

Here is the StackBlitz link.

answered Jun 23, 2019 at 7:34

user2243747

3,0078 gold badges47 silver badges66 bronze badges

Comments

Ahmet Emrebas · Accepted Answer · 2021-04-12 18:36:32Z

0

The ultimate solution for this problem is to subscribe the valueState of the form controls.

import { combineLatest } from 'rxjs';

const firstName = new FormControl();
const lastName = new FormControl();
const fullName = new FormControl();

combineLatest([firstName.valueChanges, lastName.valueChanges])
        .subscribe(([firstName, lastName]) => 
                     fullName.setValue(firstName + " " + lastName)
); 

firstName.setValue('Ahmet');
lastName.setValue('Emrebas');
   
console.log(fullName.value); // OUTPUT : Ahmet Emrebas

Whenever you change the values in the form, the c field will be updated automatically.

This is the most proper way to solve such a problem.

edited Apr 12, 2021 at 18:36

answered Apr 12, 2021 at 18:26

Ahmet Emrebas

1,01211 silver badges18 bronze badges

Collectives™ on Stack Overflow

Angular Reactive Form Programmatic Setter

component.ts

component.html

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

component.ts

component.html

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related