How to concatenate values using Reactive Forms?

Question

I want to concatenate 2 values into 1 label using Reactive Forms. In this case i'm not using ngModel binding.

 <label 
                     id="identificationCode"
                     name="identificationCode"
                     formControlName="lblIdCode">______</label>

<input type="text" 
                        id="reference"
                        name="reference"
                        formControlName="txtReference"
                        maxlength="250"
                        (change)="handleIdCode($event)">

<input type="text" 
                        id="publicacion"
                        name="publicacion"
                        formControlName="txtPublicacion"
                        maxlength="250"
                        (change)="handleIdCode($event)">

I want to concatenate those 2 input text when user is writing and automatically reflect the value into the label. Is there any way like we do it with model binding without change event??

Answer 1

Use label to display the information. The label is not meant to bind with Reactive Form. If you need concatenate values to pass to API or for any use then try on TS. User cannot change the value of Label so there is no point to bind it, but just display the concatenated value.

Remove formControlName="lblIdCode" from your label and add for attribute.

<label>{{form.get('txtReference').value}} - {{form.get('txtPublicacion').value}}</label>

And concatenate on TS:

const lblIdCode = this.form.get('txtReference').value + this.form.get('txtPublicacion').value

The definition of label:

The HTML element represents a caption for an item in a user interface.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label

Answer 2

Although given answers work fine. There could be another declarative approach which will take advantage of valueChanges observables of the input text. We can combine the input texts' valuechanges observables and map to the desired output i.e. concatenate the Reference + Publicacion like this:

Component.ts:

export class FormreactiveComponent implements OnInit {
  lblIdCode$: Observable<string>;

  form = new FormGroup({
    txtReference: new FormControl(''),
    txtPublicacion: new FormControl('')    
   });

  constructor() { }

  ngOnInit() {

    const refCtrl = this.form.get('txtReference');
    const pubCtrl = this.form.get('txtPublicacion');

    this.lblIdCode$ = combineLatest(refCtrl.valueChanges.pipe(startWith(refCtrl.value)), 
                                   pubCtrl.valueChanges.pipe(startWith(pubCtrl.value)))
                      .pipe(map(([firstName, lastName]) => {
                        return `${firstName} ${lastName}`;
                      }));
  }    
}

Template:

<form name="form" [formGroup]="form">
      <div class="form-group">
        <label for="txtReference">Reference</label>
        <input type="text"  class="form-control" formControlName="txtReference"/>            
      </div>
      <div class="form-group">
        <label for="txtPublicacion">Publicacion</label>
        <input type="text" class="form-control" formControlName="txtPublicacion"/>            
      </div> 
      <div class="form-group">
        <label for="lblIdCode">{{lblIdCode$ | async}}</label>             
      </div>          
</form>

Working example