Mudanças entre as edições de "Angular:ReactiveForms"
Ir para navegação
Ir para pesquisar
(Criou página com '=ReactiveFormsModule= No app.module.ts import { ReactiveFormsModule } from '@angular/forms'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserMod...') |
|||
| Linha 9: | Linha 9: | ||
imports: [ | imports: [ | ||
BrowserModule, | BrowserModule, | ||
| − | '''ReactiveFormsModule''' | + | '''ReactiveFormsModule''','''FormsModule''' |
], | ], | ||
providers: [], | providers: [], | ||
bootstrap: [AppComponent] | bootstrap: [AppComponent] | ||
}) | }) | ||
| + | |||
| + | ==Criar a classe que será o modelo do formulário== | ||
| + | ng g class clientes/shared/cliente | ||
| + | |||
| + | ==Defina os fields== | ||
| + | export class '''Cliente''' { | ||
| + | nome: string = ''; | ||
| + | tipo: number = 1; | ||
| + | genero: number = 1; | ||
| + | dataNascimento: Date = null; | ||
| + | observacao: string = ''; | ||
| + | inativo: boolean = false; | ||
| + | } | ||
| + | |||
| + | ==Criar o componente com o formulário== | ||
| + | ng g component clientes/formulario | ||
Edição das 11h14min de 24 de fevereiro de 2024
Índice
ReactiveFormsModule
No app.module.ts
import { ReactiveFormsModule } from '@angular/forms';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
ReactiveFormsModule,FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
Criar a classe que será o modelo do formulário
ng g class clientes/shared/cliente
Defina os fields
export class Cliente {
nome: string = ;
tipo: number = 1;
genero: number = 1;
dataNascimento: Date = null;
observacao: string = ;
inativo: boolean = false;
}
Criar o componente com o formulário
ng g component clientes/formulario
