2
respostas

Como fazer um formulário de cada passageiro

Olá, queria saber como fazer um formulário para cada passageiro, você coloca 3 passageiro, como seria criado para cada passageiro?

2 respostas

Olá, Israel!

Para criar um formulário para cada passageiro, você pode utilizar a abordagem de componentização do Angular.

Primeiro, você pode criar um componente chamado "PassageiroForm" que será responsável por exibir e gerenciar o formulário de um único passageiro. Dentro desse componente, você pode utilizar o template do Angular para criar os campos do formulário, como nome, idade, etc.

Em seguida, no componente pai onde você deseja exibir os formulários para cada passageiro, você pode utilizar um *ngFor para percorrer uma lista de passageiros e renderizar o componente "PassageiroForm" para cada um deles. Assim, cada passageiro terá seu próprio formulário.

Aqui está um exemplo de como ficaria o código:

<!-- passageiro-form.component.html -->
<form>
  <label>Nome:</label>
  <input type="text" [(ngModel)]="passageiro.nome">

  <label>Idade:</label>
  <input type="number" [(ngModel)]="passageiro.idade">
</form>
// passageiro-form.component.ts
import { Component, Input } from '@angular/core';

@Component({
  selector: 'passageiro-form',
  templateUrl: './passageiro-form.component.html',
  styleUrls: ['./passageiro-form.component.css']
})
export class PassageiroFormComponent {
  @Input() passageiro: any;
}
<!-- componente-pai.component.html -->
<div *ngFor="let passageiro of passageiros">
  <passageiro-form [passageiro]="passageiro"></passageiro-form>
</div>

Lembre-se de importar e declarar corretamente os componentes no módulo do Angular.

Espero ter ajudado e bons estudos!

PassageiroForm receberia o FormCadastarService no construtor, tem a mesma estrutura do FormBuscaService mudando os inputs. Como seria a estrutura FormCadastarService, pois ele precisa de um array PassageiroForm, não entendi como passar cada inputs de cada item do PassageiroForm,apresentado no HTML para o FormCadastarService

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software