如何使用 Angular 反应形式根据选择的值将表单字段的值设置到另一个字段中？

Question

我是 Angular 的新手，我正在使用 PrimeNG 开发一个应用程序。

我遇到了以下问题，但找不到解决方案。基本上当用户用一个值填充一个特定的字段时，另一个字段必须用一个特定的值填充。

我尽量详细解释一下。

我有这 2 个字段：

其中 Referent 字段代表一个人，Ruole referente 字段代表 selected 人的角色。

例如，我可以将 Mario Rossi 设置为 Referente 字段的值：

如您所见，Referente 字段基于基于可能用户列表的自动完成输入表单。对于自动完成中使用的此用户列表中的每个用户，还有特定的用户角色信息。

这是我对这两个字段的 HTML 代码：

<div class="row">
  <div class="col-2">
    <p>Referente</p>
  </div>
  <div class="col-10">
    <!--<input id="referente" formControlName="referente" type="text" pInputText />-->

    <p-autoComplete id="referente"
                formControlName="referente"
                [suggestions]="filteredPeople"
                (completeMethod)="filterPeople($event)"
                field="complete_name"
                [dropdown]="true">
      <ng-template let-person pTemplate="item">
      <div class="people-item">
          <!--<img src="assets/showcase/images/demo/flag/flag_placeholder.png" [class]="'flag flag-' + person.avatar.toLowerCase()" />-->
          <img src="assets/img/people/{{person.avatar}}" [class]="'flag flag-' + person.avatar.toLowerCase()" />
          <span>{{person.complete_name}}</span>
      </div>
      </ng-template>
  </p-autoComplete>

  </div>
</div>

<div class="row">
  <div class="col-2">
    <p>Ruolo referente</p>
  </div>
  <div class="col-10">
    <input id="ruoloReferente" formControlName="ruoloReferente" type="text" pInputText value= />
  </div>
</div>

如前所述，这是一种反应形式，因此目前第二个 Ruolo Referente 字段正在使用此 formControlName="ruoloReferente"在表单控件中设置值。我希望在 select 用户进入 Referente 字段后使用与 selected 用户相关的正确信息。

基本上，当我 select 列表中的用户时，它使用 **{{person.complete_name}} 相关对象字段来显示名称。此对象还包含其他字段 person.role，必须用于确定其他字段内容的价值。

我怎样才能正确地实现这个行为？我错过了什么？

Answer 1

您可以在第一个 select 框的更改事件期间设置表单控件值。所以我创建了一个简单的 stackblitz，您可以在其中清楚地了解它。

你可以找到 stackblitz link here.

解释:

在上面的stack blitz中，会有两个select框。如果您 select 第一个 select 中的某个值，第二个 select 中将填充相同的值。

app.component.html

<select class="custom-select" (change)="changeCity($event)" formControlName="cityName">
              <option value="">Choose your city</option>
              <option *ngFor="let city of City" [ngValue]="city">{{city}}</option>
</select>

如您所见，这里有一个更改事件，在该更改事件期间，我将在打字稿中设置第二个 select 值。

app.component.ts

  changeCity(e) {
    this.registrationForm.get('cityNameDup').setValue(e.target.value);
  }

希望这能解决您的问题。

如何使用 Angular 反应形式根据选择的值将表单字段的值设置到另一个字段中？

How can I set the value of a form field basing on the value selected into another field using Angular rective form?

primeng

angular

angular-reactive-forms