How to get the input value written by interpolation code using Reactive Forms?

Question

In this case i'm using Reactive Forms not ngModel

I'm writting an interpolation value into an input text field

When i submit my form i get all the field values, except the interpolated one. The interpolated is empty

How to fix it??

<label class="form-control-sm"
         id="identificationCode"
         name="identificationCode">{{reference.value + "-" + publishDate.value}}
</label>
<input  #txtIdCode
         type="text" 
         id="idCode" 
         name="idCode"
         formControlName="txtIdCode"
         maxlength="15"                     
         value="{{reference.value + '-' + publishDate.value}}">

When i get txtIdCode in this way, i get an empty value but the input text is filled:

item.identificationCode = this.myForm.controls["txtIdCode"].value;

Answer 1

Changing value attribute doesn't affect the FormControl. It will remain empty until the input field is changed.

In your case, binding the template reference variable with ViewChild will work.

component.ts

  @ViewChild('txtIdCode')
  txtIdCode: ElementRef
  ...

  submit() {
    item.identificationCode = txtIdCode.nativeElement.value
  }

Answer 2

Use attribute binding

[value]="reference.value + '-' + publishDate.value"

Answer 3

You shouldn't use value with form control, you need to set the actual value to the formcontrol itself:

Sample:

this.myForm = this.fb.group({
  txtIdCode: [this.reference.value + "-" + this.publishDate.value]
});

If you do not know the value when you create the form, use patchValue() when you do:

this.myForm.get('txtIdCode')
  .patchValue(this.reference.value + "-" + this.publishDate.value)