Skip to main content
corrigida sintaxe
Fonte Link
Arthur Siqueira
  • 1,6mil
  • 1
  • 17
  • 48

Criei um componente que possui um campo de tipo <select> e recebe uma propriedade [modelo] como entrada: se o modelo for nulo, o formulário é inicializado vazio; se possuir conteúdo, é inicializado para modificação.

HTML:

<form [formGroup]="modeloForm" (ngSubmit)="ngSubmit(modeloForm.value)">
  <input type="text" formControlName="name" id="name" placeholder="Nome"/>
  <label for="name">Nome</label>

  <select formControlName="item_id" id="item_id">
    <option [ngValue]="null" disabled selected>Escolha o banco:</option>
    <option *ngFor="let item of itens" [ngValue]="item.id">{{ item.name }}</option>
  </select>
  <button id="submit-btn" type="submit">
    Cadastrar
  </button>
</form>

Typescript:

itens: Item = ITENS; // array de itens importados de classe à parte
modeloForm: FormGroup;
_modelo: Modelo | null = null;

@Input() set modelo(modelo: Modelo | null){
  this._modelo = modelo;

  // tentei setar usando com a sintaxe do JavaScript, mas sem sucesso
  document.getElementById("item_id").nodeValue = !!this._modelo ? this._modelo.item_id + '' : '';

  // função que serve para resetar o formulário
  setTimeout(() => {
    this.modeloForm.reset({
      name: !!this._modelo ? this._modelo.name : '',
      item_id: !!this._modelo ? this._modelo.item_id : ''
    });
  }, 100);
}

Modelos:

interface Modelo{
  id: number;
  name: string;
  item_id: number;
}

interface Item{
  id: number;
  name: string;
}

const ITENS: Item[] = [
  {id:1, name:'item1'},
  {id:2, name:'item2'},
  {id:3, name:'item3'},
  {id:4, name:'item4'},
  {id:5, name:'item5'}
];

Porém, apesar de inicializar o formulário com o nome e o objeto corretamente, o item selecionado no campo <select> não aparece até que o campo seja selecionado. Como devo proceder?

Já tentei colocar a inicialização no ngInit() (mesmo sabendo que não funcionaria porque o ngInit só é chamado quando o componente é inicializado pela primeira vez), inverter a ordem entre a definição pelo nodeValue e a pelo modeloForm, comentar a linha onde tento setar manualmente pelo nodeValue, comentar as linhas onde tento setar pelo modeloForm.reset e remover esse trecho do setTimeout, todas sem sucesso.

Criei um componente que possui um campo de tipo <select> e recebe uma propriedade [modelo] como entrada: se o modelo for nulo, o formulário é inicializado vazio; se possuir conteúdo, é inicializado para modificação.

HTML:

<form [formGroup]="modeloForm" ngSubmit)="ngSubmit(modeloForm.value)">
  <input type="text" formControlName="name" id="name" placeholder="Nome"/>
  <label for="name">Nome</label>

  <select formControlName="item_id" id="item_id">
    <option [ngValue]="null" disabled selected>Escolha o banco:</option>
    <option *ngFor="let item of itens" [ngValue]="item.id">{{ item.name }}</option>
  </select>
  <button id="submit-btn" type="submit">
    Cadastrar
  </button>
</form>

Typescript:

itens: Item = ITENS; // array de itens importados de classe à parte
modeloForm: FormGroup;
_modelo: Modelo | null = null;

@Input() set modelo(modelo: Modelo | null){
  this._modelo = modelo;

  // tentei setar usando com a sintaxe do JavaScript, mas sem sucesso
  document.getElementById("item_id").nodeValue = !!this._modelo ? this._modelo.item_id + '' : '';

  // função que serve para resetar o formulário
  setTimeout(() => {
    this.modeloForm.reset({
      name: !!this._modelo ? this._modelo.name : '',
      item_id: !!this._modelo ? this._modelo.item_id : ''
    });
  }, 100);
}

Modelos:

interface Modelo{
  id: number;
  name: string;
  item_id: number;
}

interface Item{
  id: number;
  name: string;
}

const ITENS: Item[] = [
  {id:1, name:'item1'},
  {id:2, name:'item2'},
  {id:3, name:'item3'},
  {id:4, name:'item4'},
  {id:5, name:'item5'}
];

Porém, apesar de inicializar o formulário com o nome e o objeto corretamente, o item selecionado no campo <select> não aparece até que o campo seja selecionado. Como devo proceder?

Já tentei colocar a inicialização no ngInit() (mesmo sabendo que não funcionaria porque o ngInit só é chamado quando o componente é inicializado pela primeira vez), inverter a ordem entre a definição pelo nodeValue e a pelo modeloForm, comentar a linha onde tento setar manualmente pelo nodeValue, comentar as linhas onde tento setar pelo modeloForm.reset e remover esse trecho do setTimeout, todas sem sucesso.

Criei um componente que possui um campo de tipo <select> e recebe uma propriedade [modelo] como entrada: se o modelo for nulo, o formulário é inicializado vazio; se possuir conteúdo, é inicializado para modificação.

HTML:

<form [formGroup]="modeloForm" (ngSubmit)="ngSubmit(modeloForm.value)">
  <input type="text" formControlName="name" id="name" placeholder="Nome"/>
  <label for="name">Nome</label>

  <select formControlName="item_id" id="item_id">
    <option [ngValue]="null" disabled selected>Escolha o banco:</option>
    <option *ngFor="let item of itens" [ngValue]="item.id">{{ item.name }}</option>
  </select>
  <button id="submit-btn" type="submit">
    Cadastrar
  </button>
</form>

Typescript:

itens: Item = ITENS; // array de itens importados de classe à parte
modeloForm: FormGroup;
_modelo: Modelo | null = null;

@Input() set modelo(modelo: Modelo | null){
  this._modelo = modelo;

  // tentei setar usando com a sintaxe do JavaScript, mas sem sucesso
  document.getElementById("item_id").nodeValue = !!this._modelo ? this._modelo.item_id + '' : '';

  // função que serve para resetar o formulário
  setTimeout(() => {
    this.modeloForm.reset({
      name: !!this._modelo ? this._modelo.name : '',
      item_id: !!this._modelo ? this._modelo.item_id : ''
    });
  }, 100);
}

Modelos:

interface Modelo{
  id: number;
  name: string;
  item_id: number;
}

interface Item{
  id: number;
  name: string;
}

const ITENS: Item[] = [
  {id:1, name:'item1'},
  {id:2, name:'item2'},
  {id:3, name:'item3'},
  {id:4, name:'item4'},
  {id:5, name:'item5'}
];

Porém, apesar de inicializar o formulário com o nome e o objeto corretamente, o item selecionado no campo <select> não aparece até que o campo seja selecionado. Como devo proceder?

Já tentei colocar a inicialização no ngInit() (mesmo sabendo que não funcionaria porque o ngInit só é chamado quando o componente é inicializado pela primeira vez), inverter a ordem entre a definição pelo nodeValue e a pelo modeloForm, comentar a linha onde tento setar manualmente pelo nodeValue, comentar as linhas onde tento setar pelo modeloForm.reset e remover esse trecho do setTimeout, todas sem sucesso.

troca de nome da pergunta
Link
Arthur Siqueira
  • 1,6mil
  • 1
  • 17
  • 48

Select não pode seré inicializado com valor padrão

Fonte Link
Arthur Siqueira
  • 1,6mil
  • 1
  • 17
  • 48

Select não pode ser inicializado com valor padrão

Criei um componente que possui um campo de tipo <select> e recebe uma propriedade [modelo] como entrada: se o modelo for nulo, o formulário é inicializado vazio; se possuir conteúdo, é inicializado para modificação.

HTML:

<form [formGroup]="modeloForm" ngSubmit)="ngSubmit(modeloForm.value)">
  <input type="text" formControlName="name" id="name" placeholder="Nome"/>
  <label for="name">Nome</label>

  <select formControlName="item_id" id="item_id">
    <option [ngValue]="null" disabled selected>Escolha o banco:</option>
    <option *ngFor="let item of itens" [ngValue]="item.id">{{ item.name }}</option>
  </select>
  <button id="submit-btn" type="submit">
    Cadastrar
  </button>
</form>

Typescript:

itens: Item = ITENS; // array de itens importados de classe à parte
modeloForm: FormGroup;
_modelo: Modelo | null = null;

@Input() set modelo(modelo: Modelo | null){
  this._modelo = modelo;

  // tentei setar usando com a sintaxe do JavaScript, mas sem sucesso
  document.getElementById("item_id").nodeValue = !!this._modelo ? this._modelo.item_id + '' : '';

  // função que serve para resetar o formulário
  setTimeout(() => {
    this.modeloForm.reset({
      name: !!this._modelo ? this._modelo.name : '',
      item_id: !!this._modelo ? this._modelo.item_id : ''
    });
  }, 100);
}

Modelos:

interface Modelo{
  id: number;
  name: string;
  item_id: number;
}

interface Item{
  id: number;
  name: string;
}

const ITENS: Item[] = [
  {id:1, name:'item1'},
  {id:2, name:'item2'},
  {id:3, name:'item3'},
  {id:4, name:'item4'},
  {id:5, name:'item5'}
];

Porém, apesar de inicializar o formulário com o nome e o objeto corretamente, o item selecionado no campo <select> não aparece até que o campo seja selecionado. Como devo proceder?

Já tentei colocar a inicialização no ngInit() (mesmo sabendo que não funcionaria porque o ngInit só é chamado quando o componente é inicializado pela primeira vez), inverter a ordem entre a definição pelo nodeValue e a pelo modeloForm, comentar a linha onde tento setar manualmente pelo nodeValue, comentar as linhas onde tento setar pelo modeloForm.reset e remover esse trecho do setTimeout, todas sem sucesso.