Skip to content

Instantly share code, notes, and snippets.

@asantos3

asantos3/signIn-student.component.html

Last active June 11, 2017 00:27
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save asantos3/0caaf0dc7698c570d09f0285fc7feab9 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save asantos3/0caaf0dc7698c570d09f0285fc7feab9 to your computer and use it in GitHub Desktop.
Download ZIP
Angular 4 Model Driven Form Validation
Raw
signIn-student.component.html
<h2>{{title}}</h2>
<hr>
<div class="row">
<div class="col-md-2">
</div>
<div class="col-md-8">
<form class="form-horizontal" #f="ngForm" novalidate (ngSubmit)="save(f.value, f.valid)">
<div class="form-group" [ngClass]="{
'has-success': name.valid && name.touched,
'has-error': name.invalid && name.touched
}">
<label for="name" class="col-md-3 control-label">Nome Completo</label>
<div class="col-md-9">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user" aria-hidden="true"></i></span>
<input type="text" class="form-control" [(ngModel)]="register.name" #name="ngModel" name="name" id="tfSigninUserName" placeholder="Enter your Name"
minlength="4" required>
<ng-container *ngIf="name.invalid && name.touched">
<span *ngIf="name.invalid && name.touched" class="glyphicon form-control-feedback glyphicon-remove" aria-hidden="true"></span>
</ng-container>
<ng-container *ngIf="name.valid && name.touched">
<span class="glyphicon form-control-feedback glyphicon-ok" aria-hidden="true"></span>
</ng-container>
</div>
<div class="help-block" *ngIf="name.invalid && name.touched">
<p *ngIf="name.errors.required">Name is required</p>
<p *ngIf="name.errors.minlength">minlength 4</p>
</div>
</div>
</div>
<div class="form-group" [ngClass]="{
'has-success': numAluno.valid && numAluno.touched,
'has-error': numAluno.invalid && numAluno.touched
}">
<label for="numAluno" class="col-md-3 control-label">Número de Aluno</label>
<div class="col-md-9">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-education" aria-hidden="true"></i></span>
<input type="text" class="form-control" [(ngModel)]="register.numAluno" #numAluno="ngModel" name="numAluno" id="tfSigninUserStudentNr" placeholder="Número de Aluno"
required/>
<ng-container *ngIf="numAluno.invalid && numAluno.touched">
<span *ngIf="numAluno.invalid && numAluno.touched" class="glyphicon form-control-feedback glyphicon-remove" aria-hidden="true"></span>
</ng-container>
<ng-container *ngIf="numAluno.valid && numAluno.touched">
<span class="glyphicon form-control-feedback glyphicon-ok" aria-hidden="true"></span>
</ng-container>
</div>
<div class="help-block" *ngIf="numAluno.invalid && numAluno.touched">
<p *ngIf="numAluno.errors.required">numAluno is required</p>
</div>
</div>
</div>
<div class="form-group" [ngClass]="{
'has-success': email.valid && email.touched,
'has-error': email.invalid && email.touched
}">
<label for="email" class="col-md-3 control-label">Email</label>
<div class="col-md-9">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user" aria-hidden="true"></i></span>
<input type="text" class="form-control" [(ngModel)]="register.email" #email="ngModel" name="email" id="tfSigninUserEmail" placeholder="Enter your Email"
required/>
<ng-container *ngIf="email.invalid && email.touched">
<span *ngIf="email.invalid && email.touched" class="glyphicon form-control-feedback glyphicon-remove" aria-hidden="true"></span>
</ng-container>
<ng-container *ngIf="email.valid && email.touched">
<span class="glyphicon form-control-feedback glyphicon-ok" aria-hidden="true"></span>
</ng-container>
</div>
<div class="help-block" *ngIf="email.invalid && email.touched">
<p *ngIf="email.errors.required">email is required</p>
</div>
</div>
</div>
<div class="form-group" [ngClass]="{
'has-success': password.valid && password.touched,
'has-error': password.invalid && password.touched
}">
<label for="password" class="col-md-3 control-label">Password</label>
<div class="col-md-9">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock" aria-hidden="true"></i></span>
<input type="password" class="form-control" [(ngModel)]="register.password" #password="ngModel" name="password" id="tfSigninUserPass" placeholder="Enter your Password"
required/>
<ng-container *ngIf="password.invalid && password.touched">
<span *ngIf="password.invalid && password.touched" class="glyphicon form-control-feedback glyphicon-remove" aria-hidden="true"></span>
</ng-container>
<ng-container *ngIf="password.valid && password.touched">
<span class="glyphicon form-control-feedback glyphicon-ok" aria-hidden="true"></span>
</ng-container>
</div>
<div class="help-block" *ngIf="password.invalid && password.touched">
<p *ngIf="password.errors.required">password is required</p>
</div>
</div>
</div>
<div class="form-group" [ngClass]="{
'has-success': confirmpassword.valid && confirmpassword.touched,
'has-error': confirmpassword.invalid && confirmpassword.touched
}">
<label for="confirmpassword" class="col-md-3 control-label">Confirmar Password</label>
<div class="col-md-9">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock" aria-hidden="true"></i></span>
<input type="password" class="form-control" #confirmpassword="ngModel" [(ngModel)]="register.confirmpassword" name="confirmpassword"
id="tfSigninUserRepPass" placeholder="Confirm your Password" required/>
<ng-container *ngIf="confirmpassword.invalid && confirmpassword.touched">
<span *ngIf="confirmpassword.invalid && confirmpassword.touched" class="glyphicon form-control-feedback glyphicon-remove" aria-hidden="true"></span>
</ng-container>
<ng-container *ngIf="confirmpassword.valid && confirmpassword.touched">
<span class="glyphicon form-control-feedback glyphicon-ok" aria-hidden="true"></span>
</ng-container>
</div>
<div class="help-block" *ngIf="confirmpassword.invalid && confirmpassword.touched">
<p *ngIf="confirmpassword.errors.required">Name is required</p>
</div>
</div>
</div>
<!--<div class="form-group" [ngClass]="{
'has-success': userPhoto.valid && userPhoto.touched,
'has-error': userPhoto.invalid && userPhoto.touched
}">
<label for="userPhoto" class="col-md-3 control-label">Fotografia</label>
<div class="col-md-9">
<div class="input-group" style="border: 1px solid #dddddd; border-radius: 5px;">
<span class="input-group-addon"><i class="glyphicon glyphicon-picture" aria-hidden="true"></i></span>
<div class="col-md-10">
<input type="file" class="file" [(ngModel)]="register.userPhoto" #userPhoto="ngModel" name="userPhoto" accept="image/*"/>
</div>
</div>
</div>
</div> -->
<div class="form-group" [ngClass]="{
'has-success': school.valid && school.touched,
'has-error': school.invalid && school.touched
}">
<label for="confirm" class="col-md-3 control-label">Escola</label>
<div class="col-md-9">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-education" aria-hidden="true"></i></span>
<select class="form-control" id="slSigninUserSchool" #school="ngModel" name="school" [ngModel]="selectedDevice" (ngModelChange)="onChange($event)">
<option [value]="school.id" *ngFor="let school of getSchools">{{school.desc}}</option>
</select>
</div>
<div class="help-block" *ngIf="school.invalid && school.touched">
<p *ngIf="school.errors.required">school is required</p>
</div>
</div>
</div>
<div class="form-group" [ngClass]="{
'has-success': course.valid && course.touched,
'has-error': course.invalid && course.touched
}">
<label for="confirm" class="col-md-3 control-label">Curso</label>
<div class="col-md-9">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-education" aria-hidden="true"></i></span>
<select class="form-control" id="slSigninUserCourse" [ngModel]="register.course" #course="ngModel" name="course">
<option [value]="course.id" *ngFor="let course of getCourses">{{course.name}}</option>
</select>
</div>
<div class="help-block" *ngIf="course.invalid && course.touched">
<p *ngIf="course.errors.required">course is required</p>
</div>
</div>
</div>
<div class="form-group" [ngClass]="{
'has-success': phone.valid && phone.touched,
'has-error': phone.invalid && phone.touched
}">
<label for="phone" class="col-md-3 control-label">Telemóvel</label>
<div class="col-md-9">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-phone" aria-hidden="true"></i></span>
<input type="text" class="form-control" #phone="ngModel" [(ngModel)]="register.phone" name="phone" id="tfSigninUserPhone" placeholder="Insira o seu número de telemóvel"
minlength="9" maxlength="14"/>
<ng-container *ngIf="phone.invalid && phone.touched">
<span *ngIf="phone.invalid && phone.touched" class="glyphicon form-control-feedback glyphicon-remove" aria-hidden="true"></span>
</ng-container>
<ng-container *ngIf="phone.valid && phone.touched">
<span class="glyphicon form-control-feedback glyphicon-ok" aria-hidden="true"></span>
</ng-container>
</div>
<div class="help-block" *ngIf="phone.invalid && phone.touched">
<p *ngIf="phone.errors.minlength">minlength 9</p>
<p *ngIf="phone.errors.maxlength">maxlength 14</p>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-10"></div>
<div class="col-md-2">
<button id="tfSigninUserRegister" type="submit" class="btn btn-primary col-md-12" [disabled]="!f.form.valid">Registar</button>
</div>
</div>
</div>
</form>
</div>
<div class="col-md-2">
</div>
</div>
Raw
signIn-student.component.ts
import { Component, Input, OnInit } from "@angular/core";
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { SignInStudentService } from "./signIn-student.service";
import { ISchool, ICourse } from "../schools/schools";
import { Register } from "./register";
import { Router } from "@angular/router";
import { ISignInStudent } from "./signIn";
@Component({
templateUrl: "./signIn-student.component.html",
providers: [SignInStudentService]
})
export class SignInStudentComponent implements OnInit {
title = 'Registar Aluno';
getSchools: ISchool[];
getCourses: ICourse[];
postData: string;
register: Register;
myform: FormGroup;
name: FormControl;
numAluno: FormControl;
email: FormControl;
password: FormControl;
confirmpassword: FormControl;
// userPhoto: FormControl;
school: FormControl;
course: FormControl;
phone: FormControl;
constructor(private _signInService: SignInStudentService, private router: Router) { }
ngOnInit() {
this.register = new Register();
this.onSchoolGet();
this.createFormControls();
this.createForm();
}
createFormControls() {
this.name = new FormControl('', Validators.required);
this.numAluno = new FormControl('', Validators.required);
this.email = new FormControl('', Validators.required);
this.password = new FormControl('', Validators.required);
this.confirmpassword = new FormControl('', Validators.required);
// this.userPhoto = new FormControl('');
this.school = new FormControl('', Validators.required);
this.course = new FormControl('', Validators.required);
this.phone = new FormControl('', [Validators.minLength(9), Validators.maxLength(14)]);
}
createForm() {
this.myform = new FormGroup({
name: this.name,
numAluno: this.numAluno,
email: this.email,
password: this.password,
confirmpassword: this.confirmpassword,
school: this.school,
course: this.course,
phone: this.phone
});
}
save(model: ISignInStudent, isValid: boolean) {
// check if model is valid
// if valid, call API to save customer
console.log(model, isValid);
}
onChange(selectedDevice: string) {
this.onCourseGet(selectedDevice);
}
check(password: string, confirmpassword: string) {
console.log(password);
console.log(confirmpassword);
if (password == confirmpassword) {
// this.onSignInStPost();
} else {
alert("Password Invalid");
}
}
//teste de get a um JSON do site referido no service respetivo
onSchoolGet() {
this._signInService.getSchool()
.subscribe(
data => this.getSchools = data,
error => alert(error),
() => console.log("Finished")
);
}
onCourseGet(idS: string) {
this._signInService.getCourse(idS)
.subscribe(
data => this.getCourses = data,
error => alert(error),
() => console.log("Finished")
);
}
/* //teste de post a um JSON com os valores referidos no service respetivo
onSignInStPost() {
this._signInService.postJSON(this.register)
.subscribe(
data => this.postData = data,
error =>{
let myContainer = <HTMLElement> document.querySelector("#notif");
myContainer.innerHTML = '<div class="alert alert-danger"><strong>Erro</strong> no Registo</div>';
setTimeout(() => { myContainer.innerHTML = ''}, 3000)
},
() => {
let myContainer = <HTMLElement> document.querySelector("#notif");
myContainer.innerHTML = '<div class="alert alert-success"><strong>Registo</strong> Efectuado com Sucesso</div>';
setTimeout(() => { myContainer.innerHTML = ''}, 3000)
this.router.navigate(['home']);
}
);
}*/
}
Raw
signIn.ts
export interface ISignInStudent {
name: string,
numAluno: string,
email: string,
password: string,
confirmpassword: string,
school: string,
course: string,
phone: string
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment