Page 35 - Revista_60.pub
P. 35
A PROGRAMAR
ASP.NET CORE, ANGULAR 5 - CRUD COM ENTITY FRAMEWORK
get ano() { return this.edicaoForm.get('ano'); } É obrigatório o Mês.
get mes() { return this.edicaoForm.get('mes'); } </span>
}
</div>
Este componente será utilizado para adicionar e editar <span class="text-danger" *ngIf="mes.invalid
dados de edições. Uma vez que estamos a usar um form, con- && formDir.submitted">
juntamente com validação cliente-side, de forma a permitir adi- É necessário o mês
</span>
cionar e editar edições, importamos algumas classes do </div>
@angular/froms e colocamos o código para criar o formulário, <div class="form-group">
dentro do construtor de forma a que o formulário seja apresen- <button type="submit" class="btn
tado quando a pagina é carregada. A diferenciação entre adi- btn-default">Gravar</button>
ção e edição, é feita através de routing, usando parâmetros <button class="btn" (click)=
diferentes, um para adicionar edições outro para editar os re- "cancel()">Cancelar</button>
</div>
gistos de uma edição, mas veremos isso mais adiante. Agora </form>
vamos ao HTML deste controlador, tal como fizemos para o </body>
controlador anterior, mas com o nome addEdi- </html>
cao.component.html e colocamos o código seguinte:
<!DOCTYPE html> Criar a entrada no menu
<html> Chegados a este ponto, falta-nos criar uma entrada
<head>
<meta charset="utf-8" /> no menu, definir a route para essa entrada e podemos final-
<title></title> mente executar a aplicação. Para criarmos essa entrada
</head> começamos por editar o ficheiro /app/app.shared.module.ts e
<body> colocamos o seguinte código no seu interior:
<h1>{{title}}</h1>
<h3>Edição</h3>
<hr /> import { NgModule } from '@angular/core';
import { EmployeeService } from './services/
<form [formGroup]="edicaoForm" (ngSubmit)= ediservice.service'
"save()" #formDir="ngForm" novalidate> import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from
'@angular/forms';
<div class="form-group row"> import { HttpModule } from '@angular/http';
<label class=" control-label col-md- import { RouterModule } from '@angular/router';
12">Tema</label>
<div class="col-md-4"> import { AppComponent } from './components/app/
<input class="form-control" type="text" app.component';
formControlName="tema"> import { NavMenuComponent } from './components/
</div> navmenu/navmenu.component';
<span class="text-danger" *ngIf="tema.invalid import { HomeComponent } from './components/home/
&& formDir.submitted"> home.component';
import { FetchEmployeeComponent } from './
É obrigatório o tema de capa. components/fetchedicao/
</span> fetchedicao.component'
</div> import { createemployee } from './components/
<div class="form-group row"> addedicao/AddEdicao.component'
<label class="control-label col-md-12"
for="Ano"></label> @NgModule({
<div class="col-md-4"> declarations: [
<select class="form-control" AppComponent,
data-val="true" formControlName="Ano"> NavMenuComponent,
HomeComponent,
<option value="">--Seleccione o Ano-- FetchEdicaoComponent,
</option> createedicao,
<option *ngFor="let ano of anoList" ],
value={{ano.anoName}}> imports: [
{{ano.anoName}} CommonModule,
</option> HttpModule,
</select> FormsModule,
</div> ReactiveFormsModule,
<div class="form-group row"> RouterModule.forRoot([
{ path: '', redirectTo: 'home', pathMatch:
<label class="control-label col-md-12" 'full' },
for="Mes">Mes</label> { path: 'home', component: HomeComponent },
<div class="col-md-4"> { path: 'fetch-edicao', component:
<input class="form-control" type="text" FetchEdicaoComponent },
formControlName="mes"> { path: 'register-edicao', component:
</div> createedicao },
<span class="text-danger" { path: 'edicao/edit/:id', component:
*ngIf="ano.invalid && formDir.submitted"> createedicao },
35
