Change input value after selecting an option at Angular 7

Question

Inside my form, there is a select, where I choose an option, in this case I choose a user.

<div class="form-row">
    <div class="form-group col-md-5">
      <label for="usuario">ID usuário</label>
      <select name="usuario" id="usuario" class="form-control usuario" formControlName="id_usuario">
        <option value="{{ u.id_usuarios }}" *ngFor="let u of usuarios" >{{ u.id_usuarios }} - {{ u.login }}</option>
      </select>
      <div class="small" *ngIf="!usuarioPermissoesForm.controls['id_usuario'].valid && usuarioPermissoesForm.controls['id_usuario'].touched"> O ID usuário não pode ficar em branco!</div>
    </div>
  </div>

Below this select, you have an input, which will change the value within it as the user chosen in select.

<div class="form-row">
    <div class="form-group col-md-5">
      <label for="id_perfil">ID Perfil</label>
      <input type="text" class="form-control" id="id_perfil" formControlName="id_perfil">
    </div>
  </div>

I’m getting the tag data from Formbuilder, inside the component. I searched and saw that I could use (change), but I can’t pass id, example:

<select name="usuario" id="usuario" class="form-control usuario" formControlName="id_usuario" (change)="atualizar(u.id_usuarios)">
        <option value="{{ u.id_usuarios }}" *ngFor="let u of usuarios" >{{ u.id_usuarios }} - {{ u.login }}</option>
      </select>

Does anyone have any idea how to solve?

Answer 1

I decided as follows.

Inside the component, I took the tag information inside Formbuilder, and I put that information inside a variable

getPerfilOfusuario() {
    const id_usuario = this.usuarioPermissoesForm.controls['id_usuario'].value;
    this.usuarioPermissoesService.getPerfilOfusuario(id_usuario).subscribe(
      (id_perfil) => { this.populatedPerfilTag(id_perfil); console.log(id_perfil)}
    );

  }
  populatedPerfilTag(id_perfil) {
    this.usuarioPermissoesForm.patchValue({
      id_perfil: id_perfil[0].id_perfil
    });
  }

In Component.html, in the tag, I placed the name of the tag equal to the name of the Formbuilder field, I used (change) to call the function.

<div class="form-row">
    <div class="form-group col-md-5">
      <label for="usuario">Usuário</label>
      <select name="usuario" id="usuario" class="form-control usuario" formControlName="id_usuario" (change)="getPerfilOfusuario()">
        <option value="{{ u.id_usuarios }}" *ngFor="let u of usuarios" >{{ u.id_usuarios }} - {{ u.login }}</option>
      </select>
      <div class="small" *ngIf="!usuarioPermissoesForm.controls['id_usuario'].valid && usuarioPermissoesForm.controls['id_usuario'].touched"> O ID usuário não pode ficar em branco!</div>
    </div>
  </div>

In the Formbuiler it looks like this:

this.usuarioPermissoesForm = this.formBuilder.group({
      id_usuario_permissao: [null],
      id_perfil: [null], // vai preencher esse campo aqui
      id_usuario: [null, Validators.required],
      id_funcionalidade: [null, Validators.required],
      permissao: [null],


    });