Как я могу передавать данные между одноуровневыми компонентами в angular таким образом, чтобы он сохранял переданное значение в бэкэнде?

Question

Я использовал поведение в субъектном файле для подключения 2 компонентов. Данные передаются между компонентами, но переданное значение не сохраняется в объекте, который я отправляю java бэкэнду.

A. 1-й компонент

1.регистр. html

<div class="form-group" >
   <div class="form-inline">
      <label class="col-4">Enter IEC No.*</label>
      <input type="text" class="form-control" 
               formControlName="iecNo" [(value)]="text" #name name="name"
               (keyup)="change(name.value)" >
   </div>

register.ts

change(text){  
  this.mixSer.sendMessage(text) 
}

B. служебный файл, соединяющий два компонента.

import { Injectable } from '@angular/core';
import { Subject, Observable, BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class MixService {
   sendMessageSource=new BehaviorSubject<any>("default data");
   send=this.sendMessageSource.asObservable();

  constructor() { }
  sendMessage(message){

    this.sendMessageSource.next(message)
  }

C. 2-й компонент

1.signup.html
<div class="form-inline">
   <label class="col-4 text-left" formControlName="iecNo">iec  No</label>
   <input type="text" class="form-control col-md-4  " 
   formControlName="iecNo"  placeholder="" aria-required="true" [value]="iecNo"> 
</div>

2.signup.ts

ngOnInit() {    
    this.mixSer.send.subscribe(x=>this.iecNo=x)
}

Я получаю значение iecNo для компонента 2, но при отправке формы компонента регистрации только это значение не хранится в бэкэнде