Question

我在PrimeNG 7.0.0和自动完成组件中遇到了一些奇怪的行为。这个问题的摘要是，无论选择哪个项目，无论源JSON对象的结构如何，它都将以此结构覆盖FormGroup模型。

我的FormGroup对象看起来像：

exportCountry: this.fb.group({
          id: [Validators.required, Validators.maxLength(2)]    //  5/14    a2 UPPERCASE
        }),

这将产生以下内容的JSON

：

{
"exportCountry": {
        "id": ""
      },
}

我的建议来源JSON如下：

{"countries":
[
  {
    "code": "FR",
    "name": "FRANCE"
  },
  {
    "code": "AD",
    "name": "ANDORRA"
  },
  {
    "code": "AE",
    "name": "UNITED ARAB EMIRATES"
  },.....................
]
}

我有一个包含autoComplete组件的组件：

<div formGroupName="exportCountry">
  <p-autoComplete [suggestions]="filteredCountriesSingle" [inputId]="type+'countryId'"
                  (completeMethod)="filterCountrySingle($event)" field="code" 
                  [minLength]="1" [inputStyleClass]="'form-control'"
                  formControlName="id">

    <ng-template let-country pTemplate="item">
      <div class="ui-helper-clearfix" style="width: 20em">
        <span>{{country.code}}</span>
        <span> - </span>
        <span>{{country.name}}</span>
      </div>
    </ng-template>
  </p-autoComplete>
</div>

.ts文件基本上遵循PrimeNG展示柜上的示例，并且所有这些都正确显示并进行过滤并显示正确的建议。但是，一旦从选项中选择了一项，我的FormGroup对象/ JSON将更改为：

"exportCountry": {
        "id": {
          "code": "FR",
          "name": "FRANCE"
        }
      },

我要求针对最初分配的FormControl设置选定的代码，即

{
"exportCountry": {
        "id": "FR"
      },
}

非常感谢任何帮助。

PrimeNG自动完成功能会更改Form数据模型

0 个答案: