мы можем использовать formControlname в различных тегах в angular8?

Question

HTML-код: (В этом коде я добавил formcontrolname внутри элемента span, который не принимает никакого значения, я хочу добавить значение, используя имя formcontrol .. Не могли бы вы предложить какое-либо решение для этого ??)

   <mat-accordion>
                <mat-expansion-panel>
                    <mat-expansion-panel-header>
                        <mat-panel-title>
                                Sub Recipe{{i+1}}
                        </mat-panel-title>                   
                    </mat-expansion-panel-header>

                            <div class="add-div" >
                                Material
                    <mat-list role="list"  >
                        <mat-list-item role="listitem" *ngFor="let data of getMaterialListArray(i)">
                            <div class="file-name">
                                <span formcontrolName="material">{{data.title}}</span> 
                                <div>{{data.wt_in_kgs_per_unit}}{{data.uom}}</div>
                                <div class="btn-custom" (click)="deleteMaterial(data, i)">Delete</div>
                            </div>
                        </mat-list-item>                   
                    </mat-list>
                </div>
               <div class="btn-custom" (click)="addMaterial(i)">select+</div>

файл component.ts (this. Updatematerials () => В этом методе я хочу добавить значения, если заголовок одинаков для обоих выбранных материалов, для этого кода он отображается отдельно.) Пожалуйстапредложить лучшее решение ??? заранее спасибо.

 createItem() : FormGroup {
     return this.formBuilder.group({
        material : new FormControl(null, Validators.required),
        otherformulations : new FormControl(null, Validators.required)
     });
  }
addItem(){
   this.recipeArray.push(this.createItem());
   this.materialList[this.recipeArray.length-1]=[]
   this.otherFormulationList[this.recipeArray.length-1]=[]

  }
addMaterial(index) {
      this.dialog.open(SelectMaterialComponent, {data :{matList:this.materialList,type: "Ingredients"}, minWidth: '60vw', minHeight: '40vh'})
       .afterClosed().subscribe( response => {
         if(!!response) {
           console.log(response);
          this.materialList[index] = [...this.materialList[index], ...response]
              this.formulationForm.patchValue({recipeArray: [
              ...this.formulationForm.get("recipeArray").value,{
                material:response[0].title
              } ] });

            console.log(this.materialList[index]);

          this.updateMaterials();  
      }
    })
  }
deleteMaterial(data, index){
    this.materialList[index] = this.materialList[index].filter(item => item != data)
    this.formulationForm.patchValue({recipeArray :this.formulationForm.get("recipeArray").value.map((item, i) =>{
      if(i == index){
        item.material = this.materialList[index]
      }
      return item;
    }) 
  })
  this.updateMaterials();

  }
updateMaterials(){
    this.allMaterials = []
    this.materialList.map((item : any) => {
    this.allMaterials =[...this.allMaterials, ...item]});
     console.log(this.allMaterials);


     const matSum =  from(this.allMaterials).pipe(
        groupBy((x:any) => x.title),
        map((group:any) => {
          return group.reduce((acc,currentValue)=> {
            currentValue.wt_in_kgs_per_unit = acc.wt_in_kgs_per_unit + currentValue.wt_in_kgs_per_unit;
            return currentValue;
          },0);
        })
      )


      console.log("materials added");
      console.log(matSum);