0

Dentro do meu form, tem um select, onde escolho uma opção, neste caso, escolho um usuário.

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

Abaixo deste select, tem um input, que irá mudar o valor dentro dele conforme o usuario escolhido no 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>

Estou pegando os dados das tags no FormBuilder, dentro do componente. Eu pesquisei e vi que poderia usar o (change), mas não consigo passar o id, exemplo:

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

Alguém tem alguma ideia de como resolver?

1 Resposta 1

0

Resolvi da seguinte maneira.

Dentro do componente, eu peguei a informação da tag dentro do FormBuilder, e coloquei essa informação dentro de uma variável

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
    });
  }

No component.html, na tag, colocquei o nome da tag igual ao nome do campo do FormBuilder, utilizei o (change) pra chamar a função.

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

No FormBuiler fica assim:

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


    });

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .