Javascript 为表单中的所有Mat字段元素显示Mat前缀

我有一个电话号码字段，它有国家列表下拉列表和输入字段，供用户输入电话号码。现在，一旦用户从下拉列表中选择了国家，我将使用mat前缀在输入字段的输入字段中显示国家代码。我能成功地做到这一点

Myform = this.fb.group({   
    Details: this.fb.array([this.createdetails()])   
  });

createdetails(): FormGroup {
    return this.fb.group({
      name: ['', Validators.required ]
      phone: ['', Validators.required]
    });
  }

switchCountryForPhoneNumber(event) {
if(event.value){ this.countrySelected = "+" + event.value.phoneCode;
}
else { this.countrySelected = '';
}
}

现在，用户可以通过单击“添加更多”添加更多详细信息（名称和编号）。现在我面临的问题是，如果我单击AddMore并从第1行的下拉列表中选择country，它甚至会显示在第2行中。你们能给点建议吗。请参考图片

)

{{“名称”}
国家
选择选项
{{item.countryName+'（++'+item.phoneCode++'）}
{{countrySelected}}
添加_圆_轮廓
{{“添加更多详细信息”}
addDetails（）{
this.Details.push（this.createdetails（））；
}

如果我理解正确。例如，当您选择阿富汗并单击添加更多按钮时，它将切换到阿尔巴尼亚？您是否也可以显示

switchCountryForPhoneNumber

的代码？@RubenSzekér；例如，如果我选择阿富汗并单击添加更多，那么即使在第2行中，我也可以选择阿富汗代码，而不是空的。问题是当用户在第1行选择country时，我正在countryselected中保存电话代码。由于所选国家/地区已在单击“添加更多”时分配，因此它显示在matprefix中。请查找有问题的switchCountryForPhoneNumber的代码。您可以将

countrySelected

转换为数组或地图，并通过将

switchCountryForPhoneNumber

更改为方法来隐藏formArray每个表单组的所有电话代码pops将根据其用于的格式数组设置值。更好的做法是将其添加到您的正式阵列中。但是，如果我理解正确的话，我知道使用Formarray并不是那么友好。例如，当您选择阿富汗并单击添加更多按钮时，它将切换到阿尔巴尼亚？您是否也可以显示

switchCountryForPhoneNumber

的代码？@RubenSzekér；例如，如果我选择阿富汗并单击添加更多，那么即使在第2行中，我也可以选择阿富汗代码，而不是空的。问题是当用户在第1行选择country时，我正在countryselected中保存电话代码。由于所选国家/地区已在单击“添加更多”时分配，因此它显示在matprefix中。请查找有问题的switchCountryForPhoneNumber的代码。您可以将

countrySelected

转换为数组或地图，并通过将

switchCountryForPhoneNumber

更改为方法来隐藏formArray每个表单组的所有电话代码pops将根据其用于的格式数组设置值。更好的做法是将其添加到您的正式阵列中。然而，我知道使用Formarray并不是那么友好。

<div
        formArrayName="Details"
        *ngFor="let item of Details.controls; let i = index"
      >
        <div [formGroupName]="i">
          <mat-form-field appearance="outline">
            <mat-label class="required">
              {{"Name"}}
            </mat-label>
            <input              
              formControlName="name"
              class="mat-body-1"
              matInput
            />
          </mat-form-field>          
          <div class="phn-wrapper">            
          <mat-form-field
              appearance="outline"
              class="countryCode"
              style="width: 25%"
          >
                <mat-label appearance="outline">Country</mat-label>
                <mat-select                  
                  (selectionChange)="switchCountryForPhoneNumber($event)"                   
                  #countrySelect                 
                >
                  <mat-select-trigger>
                    <span
                      [class]="
                        'flag flag-' +
                        countrySelect.value?.countryCode.toLowerCase()
                      "
                    ></span>
                  </mat-select-trigger>
                  <mat-option [value]="null" show>Select Option</mat-option>
                  <mat-option *ngFor="let item of countryData" [value]="item">
                    <span
                      [class]="'flag flag-' + item.countryCode.toLowerCase()"
                    ></span>
                    {{ item.countryName + ' (+' + item.phoneCode + ')' }}
                  </mat-option>
                </mat-select>
              </mat-form-field>
              <mat-form-field
                appearance="outline"                
                class="phone"
                style="width: 75%"
              >
                <mat-label                  
                  appearance="outline"
                >                 
                </mat-label>   
                <span matPrefix>{{ countrySelected }}</span>                        
                <input                  
                  formControlName="phone"
                  matInput             
                />                
              </mat-form-field>
          </div>         
          <div class="hr"></div>
        </div>
      </div>
      <div
        *ngIf="Details.value.length < 5"
        class="add-fields"
        (click)="addDetails()"
      >
        <mat-icon class="icon">add_circle_outline</mat-icon>
        <span class="text mat-button">
          {{ "ADD MORE Details"}}</span
        >
      </div>

addDetails() {        
    this.Details.push(this.createdetails());
  }