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

Question

I am pretty new in Angular and I am working on an application using rective form with PrimeNG.

I have the following problem and I can't find a solution. Basically when the user fill a specific field with a value, another field have to be fill with a specific value.

I try to explain it in detials.

I have this 2 fields:

Where Referent field represents a person and Ruole referente field represent the role of the selected person.

For example I can set Mario Rossi as value of the Referente field:

As you can see the Referente field is based on an autocomplete input form based on a list of possible users. For each user in this list of users used in the autocomplete there is also the specific user role information.

This is my HTML code for these two fields:

<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>

As said before this is a reactive form so at the moment the second Ruolo Referente field is using this formControlName="ruoloReferente" to set in the form control the value. I want that after that the user select a user into the Referente field is used the correct information related to the selected user.

Basically when I select a user from the list it use the **{{person.complete_name}} related object field to show the name. This object contains also this other field person.role that have to be used to valorize the other field content.

How can I correctly implement this behavior? What am I missing?

Suhas Parameshwara Suhas Parameshwara · Accepted Answer · 2020-08-28T12:24:44

You can just set the formcontrol value during the change event of the first select box. So I have created a simple stackblitz where you can get a clear idea of it.

You can find out the stackblitz link here.

Explanation:

In the above stack blitz, there will be two select boxes. If you select some value in the first select, the same value will be populated in the second 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>

Here as you see there is a change event and during that change event, I will set the second select value in typescript.

app.component.ts

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

Hope this resolves your issue.

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

1 Answers