Как получить значение списка флажков и отобразить его в другой форме (угловой 4)

Question

Это моя кодировка HTML и TS. Я получаю значение флажка из базы данных, используя код this.service.initCompany.

**This is my TS file**

this.form = formBuilder.group({
        company: [''],
      });
      

//I populate checklist Company from Database
    initCategoriesCompany() {
        this.service.initCompany(this.language)
          .subscribe((data) => {
            console.log(data.results);

            for (var x = 0; x < data.results.length; x++) {
              let category = new CompanyModel();
                category.companyProviderId = this.hexMaskPipe.transform(data.results[x]['hex(companyCategoryId)'],'hex', true);
                      category.code = data.results[x].code;
                      category.description = data.results[x]['desc_'+this.language];
                      this.categoriesCompany.push(category);
                  
          }
              console.log(this.categoriesCompany);
              });
          }

**This is my HTML file**

<form [formGroup]="form">
<div class="form-group row">
            <label class="form-control-label col-md-3 col-sm-4 col-12" for="category">Pembekal Syarikat </label>
            <div class="col-md-8 col-sm-8 col-12">
              <ul class="list-unstyled sub-list-tree">
                <ng-container *ngFor="let category of categoriesCompany; let row=index;">
                  <li class="mb-q">
                    <span class="sub-checkbox">
                      <input type="checkbox" name="{{category.code}}" value="{{category.code}}" formControlName="company" (change)="change($event, category.description)"/>
                      {{category.description | uppercase}}
                    </span>
                  </li>
                </ng-container>
              </ul>
            </div>
          </div>
 </form>

**I want to display value from checkbox when checked here**
 
 <!--I want to display checklist value here which is in another form-->
<div class="form-group row" >
          <label class="form-control-label col-md-3 col-sm-3 col-12"> Syarikat</label>
          <div class="col-md-7 col-sm-8 col-12">{{ company[description] | uppercase }}</div>
        </div>

Answer 1

Сначала у вас есть список элементов в форме, и вы должны определить formcontrol как массив

this.form = formBuilder.group({
        company: this.formBuilder.array([{}])
      });

Теперь в компонентном файле TS у вас есть переменная, в которую вы помещаете проверенные значения.

let selectedCompony = {};

onchange(companyObj){
   this.selectedCompony = companyObj;
} 

и затем вы можете использовать созданную переменную в

 <!--I want to display checklist value here which is in another form-->
<div class="form-group row" >
          <label class="form-control-label col-md-3 col-sm-3 col-12"> Syarikat</label>
          <div class="col-md-7 col-sm-8 col-12">{{ company.description | uppercase }}</div>
        </div>