Merge pull request #4 from RodolfoSilva/feature/adicionar-validacao-n…

…o-formulario Adicionando validação no formulário
RodolfoSilva · Feb 11, 2017 · 5ddb00a · 5ddb00a
2 parents a697dbf + f95eee0
commit 5ddb00a
Show file tree

Hide file tree

Showing 3 changed files with 89 additions and 31 deletions.
diff --git a/src/pages/disciplina/disciplina.html b/src/pages/disciplina/disciplina.html
@@ -8,30 +8,44 @@
 
 
 <ion-content padding>
-  <ion-list>
-
-    <ion-item no-padding>
-      <ion-label floating>Disciplina</ion-label>
-      <ion-input type="text" name="titulo" [(ngModel)]="disciplina.titulo"></ion-input>
-    </ion-item>
-
-    <ion-item no-padding>
-      <ion-label floating>Nota da AP1</ion-label>
-      <ion-input type="number" name="ap1" max="10" [(ngModel)]="disciplina.notas.ap1" step="0.1"></ion-input>
-    </ion-item>
-
-    <ion-item no-padding>
-      <ion-label floating>Nota da AP2</ion-label>
-      <ion-input type="number" name="ap2" max="10" [(ngModel)]="disciplina.notas.ap2" step="0.1"></ion-input>
-    </ion-item>
-
-    <ion-item no-padding>
-      <ion-label floating>Nota da AP3</ion-label>
-      <ion-input type="number" name="ap3" max="10" [(ngModel)]="disciplina.notas.ap3" step="0.1"></ion-input>
-    </ion-item>
-
-  </ion-list>
-
-  <button ion-button large block (click)="save()">Salvar</button>
-  <button ion-button large block color="danger" (click)="excluir()" *ngIf="disciplina.updated_at">Apagar</button>
+  <form [formGroup]="disciplinaForm" (ngSubmit)="save()">
+    <ion-list>
+
+      <ion-item no-padding>
+        <ion-label floating>Disciplina</ion-label>
+        <ion-input type="text" name="titulo" formControlName="titulo" [(ngModel)]="disciplina.titulo"></ion-input>
+      </ion-item>
+      <ion-item no-padding no-lines text-wrap *ngIf="disciplinaForm.controls.titulo.invalid  && (disciplinaForm.controls.titulo.dirty || disciplinaForm.controls.titulo.touched)">
+        <p color="danger">Insira o nome da disciplina</p>
+      </ion-item>
+
+      <ion-item no-padding>
+        <ion-label floating>Nota da AP1</ion-label>
+        <ion-input type="number" name="ap1" formControlName="ap1" [(ngModel)]="disciplina.notas.ap1" step="0.1"></ion-input>
+      </ion-item>
+      <ion-item no-padding no-lines text-wrap *ngIf="disciplinaForm.controls.ap1.invalid  && (disciplinaForm.controls.ap1.dirty || disciplinaForm.controls.ap1.touched)">
+        <p color="danger">Nota inválida, insira uma nota entre 0.1 e 10</p>
+      </ion-item>
+
+      <ion-item no-padding>
+        <ion-label floating>Nota da AP2</ion-label>
+        <ion-input type="number" name="ap2" formControlName="ap2" [(ngModel)]="disciplina.notas.ap2" step="0.1"></ion-input>
+      </ion-item>
+      <ion-item no-padding no-lines text-wrap *ngIf="disciplinaForm.controls.ap2.invalid  && (disciplinaForm.controls.ap2.dirty || disciplinaForm.controls.ap2.touched)">
+        <p color="danger">Nota inválida, insira uma nota entre 0.1 e 10</p>
+      </ion-item>
+
+      <ion-item no-padding>
+        <ion-label floating>Nota da AP3</ion-label>
+        <ion-input type="number" name="ap3" formControlName="ap3" [(ngModel)]="disciplina.notas.ap3" step="0.1"></ion-input>
+      </ion-item>
+      <ion-item no-padding no-lines text-wrap *ngIf="disciplinaForm.controls.ap3.invalid  && (disciplinaForm.controls.ap3.dirty || disciplinaForm.controls.ap3.touched)">
+        <p color="danger">Nota inválida, insira uma nota entre 0.1 e 10</p>
+      </ion-item>
+
+    </ion-list>
+
+    <button ion-button large block type="submit" [disabled]="!disciplinaForm.valid">Salvar</button>
+    <button ion-button large block color="danger" (click)="excluir()" *ngIf="disciplina.updated_at">Apagar</button>
+  </form>
 </ion-content>
diff --git a/src/pages/disciplina/disciplina.ts b/src/pages/disciplina/disciplina.ts
@@ -1,4 +1,6 @@
+import { NotaValidator } from './../../validators/nota';
 import { DisciplinaModel } from './../../models/disciplina.model';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { Disciplinas } from './../../providers/disciplinas';
 import { Component } from '@angular/core';
 import { AlertController, NavController, NavParams, ToastController } from 'ionic-angular';
@@ -10,18 +12,30 @@ import { AlertController, NavController, NavParams, ToastController } from 'ioni
 export class DisciplinaPage {
   disciplina: DisciplinaModel;
 
+  disciplinaForm: FormGroup;
+
   constructor(
-    public navCtrl: NavController,
-    public alertCtrl: AlertController,
-    public toastCtrl: ToastController,
-    public navParams: NavParams,
-    public disciplinasService: Disciplinas
+    private navCtrl: NavController,
+    private alertCtrl: AlertController,
+    private toastCtrl: ToastController,
+    private formBuilder: FormBuilder,
+    private navParams: NavParams,
+    private disciplinasService: Disciplinas
   ) {
     this.disciplina = this.navParams.get('disciplina');
 
     if (!this.disciplina) {
       this.disciplina = new DisciplinaModel();
     }
+
+    this.disciplinaForm = this.formBuilder.group({
+      titulo: ['', Validators.required],
+      ap1: ['', NotaValidator.isValid],
+      ap2: ['', NotaValidator.isValid],
+      ap3: ['', NotaValidator.isValid]
+    });
+
+    console.log(this.disciplinaForm);
   }
 
   save() {

diff --git a/src/validators/nota.ts b/src/validators/nota.ts
@@ -0,0 +1,30 @@
+import { FormControl } from '@angular/forms';
+
+export class NotaValidator {
+
+  static isValid(control: FormControl): any {
+
+    if (!control.value) {
+      return;
+    }
+
+    if (isNaN(control.value)) {
+      return {
+        "Isso não é uma nota": true
+      };
+    }
+
+    if (control.value < 0) {
+      return {
+        "Como você conseguiu?": true
+      };
+    }
+
+    if (control.value > 10) {
+      return {
+        "Hahahaha, a nota tá errada": true
+      };
+    }
+  }
+
+}