3

Recebo a classe Cliente no meu formulário

import { NgSelectOption } from '@angular/forms';

export class Cliente {
    nome: string = '';
    carros: any [] = [
      { id: 1, modelo: 'Gol',selected:false },
      { id: 2, modelo: 'Saveiro',selected:true },

    ];

  }

 ngOnInit() {

    this.cliente = new Cliente();
  }

Quero deixar a opção pré selecionada quando o valor selected for true.

<select [(ngModel)]="cliente.carros" name="cliente.carros" >
  <option *ngFor="let c of cliente.carros"  [selected]="c.selected" [value]="c.id">
    {{c.modelo}}
  </option>
</select>

Mas quando faço isso sem a propriedade name="" o valor não é passado ao da submit no meu form

Segue abaixo a imagem como esta agora. inserir a descrição da imagem aqui

inserir a descrição da imagem aqui

Segue o link do projeto https://stackblitz.com/github/CristovaoTorres/AngularCrudTest

1
  • Tá meio estranho, você está tentando jogar o valor de volta em cliente.carros, tenta apontar o [(ngModel)]= para outra variável, por exemplo carrosSelecionados Commented 8/05/2019 às 12:43

6 Respostas 6

2

criei uma função para selecionar o item selected(talvez não seja o mais correto)

  SelecionarCarroSelect(){
this.cliente.carros.forEach((item, index) => { 
  if(item.selected)
  this.carro = item.modelo;
});

}

e o html

   <select [(ngModel)]="carro" name="cliente.carros" >
  <option *ngFor="let c of cliente.carros"  >
     {{c.modelo}}
   </option> 
 </select>
0

Experimenta apenas colocar

[selected]="c.selected"
1
  • Infelizmente não funcionou, e não da nenhum erro. Commented 7/05/2019 às 14:34
0

Eu uso o [checked] dentro da tag pra deixar pré-selecionado (isso serve para radio button). Exemplo:

<label for="permissoes">Funcionalidades & Permissões</label>
            <div class="row">
              <div class="col">
                <div class="form-check " *ngFor="let pp of perfilPermissoes; let x = index">
                  <input class="form-check-input" type="hidden">{{ pp.nome_funcionalidade }}
                  <div class="float-right">
                    Sim<input class="form-check-inline ml-2 perm" type="radio" name="optPermissao_{{pp.id_perfil_permissao}}" value="1" id="checkinfo_{{pp.id_perfil_permissao}}_1" [checked]="pp.permissao == 1">
                    Não<input class="form-check-inline ml-2 perm" type="radio" name="optPermissao_{{pp.id_perfil_permissao}}" value="0" id="checkinfo_{{pp.id_perfil_permissao}}_0" [checked]="pp.permissao == 0">
                  </div>
                </div>
              </div>
            </div>

Qualquer dúvida, coloco o resto do código aqui para maior compreensão.

0

No exemplo que vou deixar, veja a tag que tem o [attr.disabled], ela vai ter o valor pré fixado para um select, só que o valor vem do component.ts.

<div class="form-row">
    <div class="form-group col-md-5">
      <label for="componente">Componente</label>
      <select name="componente" id="componente" class="form-control componente" formControlName="id_componente" [attr.disabled]="true">
        <option value="{{ c.id_componente }}" *ngFor="let c of componentes" >{{c.nome_componente }}</option>
      </select>
    </div>
  </div>

Faço a busca no DB e insiro no formBuilder, então fica pré selecionado dentro do select.

ngOnInit() {
    this.setCurrentAction();

    this.funcionalidadesForm = this.formBuilder.group({
      id_funcionalidade: [null],
      nome_funcionalidade: [null, Validators.required],
      descricao: [null, Validators.required],
      id_componente: [null, Validators.required]
    });

    this.getListFormularios();
    this.loadPage();
  }
private loadPage() {
    if(this.currentAction == 'edit') {
      this.route.paramMap.pipe(
        switchMap(params => this.funcionalidadesService.getId(+params.get("id")))
      ).subscribe(
        (funcionalidade) => {
          this.updateForm(funcionalidade);
        }
      );
    }
  }

  private updateForm(item) {
    this.funcionalidadesForm.patchValue({
      id_funcionalidade: item[0].id_funcionalidade,
      nome_funcionalidade: item[0].nome_funcionalidade,
      descricao: item[0].descricao,
      id_componente: item[0].id_componente
    });
  }
0
<form (ngSubmit)="onSubmit()">

  <div class="form-group">
    <label for="nome">Nome</label>
    <!-- <input type="text" class="form-control" name="name" id="nome" [(ngModel)]="cliente.nome"> -->
  </div>

  <div class="form-group">
    <label for="tipo">Tipo</label>
    <select>
      <ng-container *ngFor="let carro of cliente.carros"> 
         {{carro.nome}}
      <ng-container *ngIf="carro.selected">
         <option [value]="carro.id" [selected] >
           {{carro.modelo}}
        </option>
      </ng-container>
      <ng-container *ngIf="!carro.selected">
         <option [value]="carro.id">
           {{carro.modelo}}
        </option>
      </ng-container>
      </ng-container>
    </select>
    </div>
  <input type="submit" class="btn btn-primary mt-4" value="Salvar">
  <a href="#" class="btn btn-secondary mt-4 ml-2">Cancelar</a>

</form>
7
  • Obrigado pela resposta, infelizmente não funcionou, inseri uma img na pergunta Commented 7/05/2019 às 16:27
  • ao clicar na setinha, aparece as opções corretamente? Commented 7/05/2019 às 16:47
  • Se possivel inspecione o elemento referente ao <select> e mande uma imagem Commented 7/05/2019 às 16:47
  • Alterei a pergunta com a img Commented 7/05/2019 às 16:53
  • editei, veja se agora funciona Commented 7/05/2019 às 17:01
0

Basta tirar o [(ngModel)]="cliente.carros" do select e ele automaticamente coloca o preselecionado. Testei no stackblitz e funcionou.

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 .