Question

我在我的反应式ng5表单中使用了PrimeNG AutoComplete组件。我一直无法找到在页面加载时重新加载表单值并将AutoComplete设置为值的方法。

AutoComplete映射到对象数组。我使用field属性告诉它要显示哪个字段。我想传回我的API实际上是一个不同的属性。因为AutoSelect正在将FormControl值设置为整个对象，所以我能够获取我需要的属性，尽管我希望有一种方法可以让它将值设置为我需要的属性。但我真正的问题是我无法选择一个值。

我试过了：

setValue / patchValue（设置为POJO和与该字段匹配的值 - 两者都不起作用）
在创建FormControl时设置默认值

这就是HTML的样子：

cursor.execute("SELECT * from place WHERE typeOfPlace=typeVar")
OperationalError: no such column: typeVar

反应形式：

 <form [formGroup]="preferences">
    <div class="row" style="padding-top:25px;">
      <div class="col-md-12">
        <div>
          <h3>Station</h3>
          <p>Station (or UTC) to use for time on graphical displays. Start typing for options:</p>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-1">
        <p-autoComplete formControlName="station" [suggestions]="filteredStations" (completeMethod)="filter($event)" field="code" [size]="30"
            placeholder="Station" [minLength]="1" forceSelection="true"></p-autoComplete>
      </div>
    </div>
    ...

我尝试了各种设置值的方法，但最终没有任何内容显示在UI中。

 this.preferences = this.formBuilder.group({
      station: new FormControl(),
      timeDisplay: new FormControl('utc'),
      itemsPerPage: new FormControl('7')
    });

在PrimeNGs论坛上似乎有很多关于此问题的开放主题，我还没有找到任何在线使用反应形式的东西。建议将不胜感激！

TL; DR：我无法以反应形式编程填充PrimeNG AutoComplete。任何如何做到这一点的例子都将不胜感激。

Answer 1

我最终通过使用普通的字符串数组来填充自动完成而不是对象数组来解决这个问题。

从p-autocomplete中删除了field属性后，我能够使用任何更改表单值的常规方法以编程方式设置自动完成中的值。

<p-autoComplete formControlName="station" [suggestions]="filteredStations" (completeMethod)="filter($event)" [size]="30"
            placeholder="Station" minLength="1" maxlength="3" forceSelection="true"></p-autoComplete>

this.preferences.patchValue({ station: preferences.station }, { emitEvent: false });

对于我目前的情况，这是一个可行的解决方案，我现在可以使用它。我仍然希望找到一个解决方案，允许我使用自动完成时使用更复杂的数据，同时仍然可以在页面加载时自己填充值。

Answer 2

无需删除字段属性...

对于声明，在html中，就像这样

<p-autoComplete field='AttributeValueDisplayName' dataKey='AttributeValue' formControlName="EOM_DT" [suggestions]="filteredEOM_DTs" (completeMethod)="filterLookup($event,'EOM_DT')" [minLength]="1" placeholder="Select Month End" [dropdown]="true" [autoHighlight]="true" [forceSelection]="true" (onFocus)="onFocus($event)" (click)="onFocus($event)" (onSelect)="onLookupSelected($event,'EOM_DT')" dropdownMode="blank" id="EOM_DT"></p-autoComplete>

我可以通过以下方式填写下拉菜单来进行预选择：

this.paramsForm.patchValue({ EOM_DT: {"AttributeValueDisplayName": '(blank)', "AttributeValue": ''}});

Answer 3

我有同样的问题。我想设置默认值，所以我想更新它。删除字段属性解决了该问题。但是我无法通过选择自动填充值来更新。您可以结合使用 field 属性和 dataKey 属性，将补丁程序值添加到反应形式的自动完成中。

以html

 <p-autoComplete formControlName="station" [suggestions]="filteredStations" (completeMethod)="filter($event)" field="code" dataKey="code" [size]="30"
            placeholder="Station" [minLength]="1" forceSelection="true"></p-autoComplete>
      </div>

以ts

this.preferences.patchValue({
station:{
code:<default value>
}
})

以编程方式为被动形式的PrimeNG AutoComplete选择值

3 个答案: