Блог

Я довольно новичок в Angular, и я работаю над приложением, использующим rective form с PrimeNG.

У меня следующая проблема, и я не могу найти решение. В принципе, когда пользователь заполняет определенное поле значением, другое поле должно быть заполнено определенным значением.

Я пытаюсь объяснить это в деталях.

У меня есть эти 2 поля:

Где поле Референт представляет человека, а поле Ruole referente представляет роль выбранного человека.

Например, я могу установить Марио Росси в качестве значения поля 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» для установки значения в элементе управления формой. Я хочу, чтобы после того, как пользователь выберет пользователя в поле Referente, использовалась правильная информация, относящаяся к выбранному пользователю.

В основном, когда я выбираю пользователя из списка, он использует поле связанного объекта **{{person.complete_name}} для отображения имени. Этот объект также содержит это другое поле person.роль, которую необходимо использовать для оценки содержимого другого поля.

Как я могу правильно реализовать это поведение? Чего мне не хватает?

Вы можете просто установить значение formcontrol во время события изменения первого поля выбора. Итак, я создал простой stackblitz, где вы можете получить четкое представление об этом.

Вы можете найти ссылку на stackblitz здесь.

Объяснение:

В приведенном выше стековом блице будет два поля выбора. Если вы выберете какое-либо значение в первом выборе, то то же значение будет заполнено во втором выборе.

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>
  

Здесь, как вы видите, есть событие изменения, и во время этого события изменения я установлю второе значение выбора в typescript.

app.component.ts

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

Надеюсь, это решит вашу проблему.