Skip to content

Commit

Permalink
Merge pull request spring-petclinic#64 from simrin051/form-validation
Browse files Browse the repository at this point in the history 
Form validation for pets, pettype, visits, specialities
  • Loading branch information
@arey
arey authored Oct 1, 2021
2 parents 7d79669 + b5f9144 commit 0c06668
Show file tree
Hide file tree
Showing 8 changed files with 256 additions and 61 deletions.
204 changes: 173 additions & 31 deletions src/app/owners/owner-edit/owner-edit.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,65 +18,207 @@

<div class="container-fluid">
<div class="container xd-container">
<h2>
Edit Owner
</h2>
<h2>Edit Owner</h2>
<div *ngIf="errorMessage" class="alert alert-danger">
{{ errorMessage }}
</div>
<form (ngSubmit)="onSubmit(ownerForm.value)" #ownerForm="ngForm" class="form-horizontal">
<form
(ngSubmit)="onSubmit(ownerForm.value)"
#ownerForm="ngForm"
class="form-horizontal"
>
<div class="form-group" hidden="true">
<input type="text" hidden="true" class="form-control" id="id" [(ngModel)]="owner.id" name="id"/>
<input
type="text"
hidden="true"
class="form-control"
id="id"
[(ngModel)]="owner.id"
name="id"
/>
</div>
<div class="form-group has-feedback" [class.has-success]="firstName.valid" [class.has-error]="!firstName.valid">
<div
class="form-group has-feedback"
[class.has-success]="firstName.valid"
[class.has-error]="!firstName.valid"
>
<label for="firstName" class="col-sm-2 control-label">First Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="firstName" [(ngModel)]="owner.firstName" minlength="2" required name="firstName" #firstName="ngModel"/>
<span class="glyphicon form-control-feedback" [class.glyphicon-ok]="firstName.valid" [class.glyphicon-remove]="!firstName.valid" aria-hidden="true"></span>
<span class="help-block" *ngIf="firstName.dirty && firstName.hasError('required')">First name is required</span>
<span class="help-block" *ngIf="firstName.dirty && firstName.hasError('minlength')">First name must be at least 2 characters long</span>
<input
type="text"
class="form-control"
id="firstName"
[(ngModel)]="owner.firstName"
minlength="2"
required
name="firstName"
#firstName="ngModel"
/>
<span
class="glyphicon form-control-feedback"
[class.glyphicon-ok]="firstName.valid"
[class.glyphicon-remove]="!firstName.valid"
aria-hidden="true"
></span>
<span
class="help-block"
*ngIf="firstName.dirty && firstName.hasError('required')"
>First name is required</span
>
<span
class="help-block"
*ngIf="firstName.dirty && firstName.hasError('minlength')"
>First name must be at least 2 characters long</span
>
</div>
</div>
<div class="form-group has-feedback" [class.has-success]="lastName.valid" [class.has-error]="!lastName.valid">
<div
class="form-group has-feedback"
[class.has-success]="lastName.valid"
[class.has-error]="!lastName.valid"
>
<label for="lastName" class="col-sm-2 control-label">Last Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="lastName" [(ngModel)]="owner.lastName" name="lastName" minlength="2" required #lastName="ngModel"/>
<span class="glyphicon form-control-feedback" [class.glyphicon-ok]="lastName.valid" [class.glyphicon-remove]="!lastName.valid" aria-hidden="true"></span>
<span class="help-block" *ngIf="lastName.dirty && lastName.hasError('required')">Last name is required</span>
<span class="help-block" *ngIf="lastName.dirty && lastName.hasError('minlength')">Last name must be at least 2 characters long</span>
<input
type="text"
class="form-control"
id="lastName"
[(ngModel)]="owner.lastName"
name="lastName"
minlength="2"
required
#lastName="ngModel"
/>
<span
class="glyphicon form-control-feedback"
[class.glyphicon-ok]="lastName.valid"
[class.glyphicon-remove]="!lastName.valid"
aria-hidden="true"
></span>
<span
class="help-block"
*ngIf="lastName.dirty && lastName.hasError('required')"
>Last name is required</span
>
<span
class="help-block"
*ngIf="lastName.dirty && lastName.hasError('minlength')"
>Last name must be at least 2 characters long</span
>
</div>
</div>
<div class="form-group has-feedback" [class.has-success]="address.valid" [class.has-error]="!address.valid">
<div
class="form-group has-feedback"
[class.has-success]="address.valid"
[class.has-error]="!address.valid"
>
<label for="address" class="col-sm-2 control-label">Address</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="address" [(ngModel)]="owner.address" name="address" required #address="ngModel"/>
<span class="glyphicon form-control-feedback" [class.glyphicon-ok]="address.valid" [class.glyphicon-remove]="!address.valid" aria-hidden="true"></span>
<span class="help-block" *ngIf="address.dirty && address.hasError('required')">Address is required</span>
<input
type="text"
class="form-control"
id="address"
[(ngModel)]="owner.address"
name="address"
required
#address="ngModel"
/>
<span
class="glyphicon form-control-feedback"
[class.glyphicon-ok]="address.valid"
[class.glyphicon-remove]="!address.valid"
aria-hidden="true"
></span>
<span
class="help-block"
*ngIf="address.dirty && address.hasError('required')"
>Address is required</span
>
</div>
</div>
<div class="form-group has-feedback" [class.has-success]="city.valid" [class.has-error]="!city.valid">
<div
class="form-group has-feedback"
[class.has-success]="city.valid"
[class.has-error]="!city.valid"
>
<label for="city" class="col-sm-2 control-label">City</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="city" [(ngModel)]="owner.city" name="city" required #city="ngModel"/>
<span class="glyphicon form-control-feedback" [class.glyphicon-ok]="city.valid" [class.glyphicon-remove]="!city.valid" aria-hidden="true"></span>
<span class="help-block" *ngIf="city.dirty && city.hasError('required')">City is required</span>
<input
type="text"
class="form-control"
id="city"
[(ngModel)]="owner.city"
name="city"
required
#city="ngModel"
/>
<span
class="glyphicon form-control-feedback"
[class.glyphicon-ok]="city.valid"
[class.glyphicon-remove]="!city.valid"
aria-hidden="true"
></span>
<span
class="help-block"
*ngIf="city.dirty && city.hasError('required')"
>City is required</span
>
</div>
</div>
<div class="form-group has-feedback" [class.has-success]="telephone.valid" [class.has-error]="!telephone.valid">
<div
class="form-group has-feedback"
[class.has-success]="telephone.valid"
[class.has-error]="!telephone.valid"
>
<label for="telephone" class="col-sm-2 control-label">Telephone</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="telephone" [(ngModel)]="owner.telephone" name="telephone" required maxlength="10" pattern="^[0-9]{0,10}$" #telephone="ngModel"/>
<span class="glyphicon form-control-feedback" [class.glyphicon-ok]="telephone.valid" [class.glyphicon-remove]="!telephone.valid" aria-hidden="true"></span>
<span class="help-block" *ngIf="telephone.dirty && telephone.hasError('required')">Phone number is required</span>
<span class="help-block" *ngIf="telephone.dirty && telephone.hasError('maxlength')">Phone number cannot be more than 10 digits long</span>
<span class="help-block" *ngIf="telephone.dirty && telephone.hasError('pattern')" >Phone number only accept digits</span>
<input
type="text"
class="form-control"
id="telephone"
[(ngModel)]="owner.telephone"
name="telephone"
required
maxlength="10"
pattern="^[0-9]{0,10}$"
#telephone="ngModel"
/>
<span
class="glyphicon form-control-feedback"
[class.glyphicon-ok]="telephone.valid"
[class.glyphicon-remove]="!telephone.valid"
aria-hidden="true"
></span>
<span
class="help-block"
*ngIf="telephone.dirty && telephone.hasError('required')"
>Phone number is required</span
>
<span
class="help-block"
*ngIf="telephone.dirty && telephone.hasError('maxlength')"
>Phone number cannot be more than 10 digits long</span
>
<span
class="help-block"
*ngIf="telephone.dirty && telephone.hasError('pattern')"
>Phone number only accept digits</span
>
</div>
</div>

<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button class="btn btn-default" (click)="gotoOwnerDetail(owner)">Back</button>
<button type="submit" [disabled]="!ownerForm.valid" class="btn btn-default">Update Owner</button>
<button class="btn btn-default" (click)="gotoOwnerDetail(owner)">
Back
</button>
<button
type="submit"
[disabled]="!ownerForm.valid"
class="btn btn-default"
>
Update Owner
</button>
</div>
</div>
</form>
Expand Down
35 changes: 28 additions & 7 deletions src/app/pets/pet-add/pet-add.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,29 +34,50 @@ <h2>
</div>
</div>
<br/>
<div class="form-group ">
<label for="name" class="col-sm-2 control-label">Name</label>

<div class="form-group has-feedback" [class.has-success]="petName.dirty && petName.valid"
[class.has-error]="petName.dirty && !petName.valid">
<label for="petName" class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input id="name" name="name" class="form-control" type="text" [(ngModel)]="pet.name"/>
<input id="petName" name="petName" required class="form-control" type="text" [(ngModel)]="pet.name"
#petName="ngModel"/>
<span class="glyphicon form-control-feedback" [class.glyphicon-ok]="petName.valid"
[class.glyphicon-remove]="!petName.valid" aria-hidden="true"></span>
<span class="help-block" *ngIf="petName.dirty && petName.hasError('required')">Name is required</span>
</div>
</div>
<div class="form-group ">

<div class="form-group has-feedback" [class.has-success]="birthDate.dirty && birthDate.valid"
[class.has-error]="birthDate.dirty && !birthDate.valid">
<label class="col-sm-2 control-label">Birth Date</label>
<div class="col-sm-10">
<input matInput [matDatepicker]="birthDateDatepicker" [ngModel]="pet.birthDate | date:'yyyy-MM-dd'" name="birthDate">
<input matInput [matDatepicker]="birthDateDatepicker" required [ngModel]="pet.birthDate | date:'yyyy-MM-dd'"
name="birthDate" #birthDate="ngModel">
<mat-datepicker-toggle matSuffix [for]="birthDateDatepicker"></mat-datepicker-toggle>
<mat-datepicker #birthDateDatepicker></mat-datepicker>
<span class="glyphicon form-control-feedback" [class.glyphicon-ok]="birthDate.valid"
[class.glyphicon-remove]="!birthDate.valid" aria-hidden="true"></span>
<span class="help-block"
*ngIf="birthDate.dirty && birthDate.hasError('required')">BirthDate is required</span>

</div>
</div>
<div class="control-group">
<div class="form-group ">
<div class="form-group has-feedback" [class.has-success]="type.dirty && type.valid"
[class.has-error]="type.dirty && !type.valid">
<label for="type" class="col-sm-2 control-label">Type </label>
<div class="col-sm-10">
<select id="type" name="type" class="form-control" [(ngModel)]="pet.type">
<select id="type" name="type" class="form-control" required [(ngModel)]="pet.type" #type="ngModel">
<option *ngFor="let type of petTypes"
[ngValue]="type">{{ type.name }}
</option>
</select>
<span class="glyphicon form-control-feedback" [class.glyphicon-ok]="type.valid"
[class.glyphicon-remove]="!type.valid" aria-hidden="true"></span>

<span class="help-block"
*ngIf="type.dirty && type.hasError('required')">pettype is required</span>

</div>
</div>
</div>
Expand Down
25 changes: 19 additions & 6 deletions src/app/pets/pet-edit/pet-edit.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,32 +35,45 @@ <h2>
</div>
</div>
<br/>
<div class="form-group ">
<div class="form-group has-feedback" [class.has-success]="name.dirty && name.valid" [class.has-error]="name.dirty && !name.valid">
<label for="name" class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input id="name" name="name" class="form-control" type="text" [(ngModel)]="pet.name"/>
<input id="name" name="name" class="form-control" required type="text" [(ngModel)]="pet.name" #name="ngModel"/>
<span class="glyphicon form-control-feedback" [class.glyphicon-ok]="name.valid" [class.glyphicon-remove]="!name.valid" aria-hidden="true"></span>
<span class="help-block" *ngIf="name.dirty && name.hasError('required')">Name is required</span>
<span class="help-block" *ngIf="name.dirty && name.hasError('minlength')">Name must be at least 2 characters long</span>

</div>
</div>
<div class="form-group ">
<div class="form-group has-feedback" [class.has-success]="birthDate.dirty && birthDate.valid" [class.has-error]="birthDate.dirty && !birthDate.valid">
<label class="col-sm-2 control-label">Birth Date</label>
<input matInput [matDatepicker]="birthDateDatepicker" [ngModel]="pet.birthDate | date:'yyyy-MM-dd'" name="birthDate">
<div class="col-sm-10">
<input matInput [matDatepicker]="birthDateDatepicker" required [ngModel]="pet.birthDate | date:'yyyy-MM-dd'" name="birthDate" #birthDate="ngModel">
<mat-datepicker-toggle matSuffix [for]="birthDateDatepicker"></mat-datepicker-toggle>
<mat-datepicker #birthDateDatepicker></mat-datepicker>
<span class="glyphicon form-control-feedback" [class.glyphicon-ok]="birthDate.valid" [class.glyphicon-remove]="!birthDate.valid" aria-hidden="true"></span>
<span class="glyphicon form-control-feedback" [class.glyphicon-ok]="birthDate.valid" [class.glyphicon-remove]="!birthDate.valid" aria-hidden="true"></span>
<span class="help-block" *ngIf="birthDate.dirty && birthDate.hasError('required')">BirthDate is required</span>
</div>
</div>
<div class="control-group">
<div class="form-group ">
<div class="form-group has-feedback" [class.has-success]="pettype.dirty && pettype.valid" [class.has-error]="pettype.dirty && !pettype.valid">
<label for="type" class="col-sm-2 control-label">Type </label>
<div class="col-sm-10">
<div class="col-sm-2">
<input id="type1" name="type1" class="form-control" type="text" value="{{ currentType.name }}" readonly/>
</div>
<div class="col-sm-8">
<select id="type" name="type" class="form-control" [(ngModel)]="currentType">
<select id="type" name="pettype" class="form-control" required [(ngModel)]="currentTType" #pettype="ngModel">
<option *ngFor="let type of petTypes"
[selected]="type.id == currentType.id ? true : null"
[ngValue]="type">{{ type.name }}
</option>
</select>
<span class="glyphicon form-control-feedback" [class.glyphicon-ok]="pettype.valid" [class.glyphicon-remove]="!pettype.valid" aria-hidden="true"></span>
<span class="help-block" *ngIf="pettype.dirty && pettype.hasError('required')">First name is required</span>
<span class="help-block" *ngIf="pettype.dirty && pettype.hasError('minlength')">First name must be at least 2 characters long</span>

</div>
</div>
</div>
Expand Down
7 changes: 5 additions & 2 deletions src/app/pettypes/pettype-add/pettype-add.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,11 +23,14 @@ <h2>New Pet Type</h2>
<div class="form-group" hidden="true">
<input type="text" hidden="true" class="form-control" id="id" [(ngModel)]="pettype.id" name="id"/>
</div>
<div class="form-group has-feedback">
<div class="form-group has-feedback" [class.has-success]="name.dirty && name.valid" [class.has-error]="name.dirty && !name.valid">
<div class="form-group ">
<label class="col-sm-1 control-label">Name</label>
<div class="col-sm-6">
<input id="name" name="name" class="form-control" type="text" [(ngModel)]="pettype.name"/>
<input id="name" name="name" class="form-control" required type="text" [(ngModel)]="pettype.name" #name="ngModel"/>
<span class="glyphicon form-control-feedback" [class.glyphicon-ok]="name.valid" [class.glyphicon-remove]="!name.valid" aria-hidden="true"></span>
<span class="help-block" *ngIf="name.dirty && name.hasError('required')">Name is required</span
>
</div>
<button class="btn btn-default" type="submit">Save</button>
</div>
Expand Down
6 changes: 4 additions & 2 deletions src/app/pettypes/pettype-edit/pettype-edit.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,11 +23,13 @@ <h2>Edit Pet Type</h2>
<div class="form-group" hidden="true">
<input type="text" hidden="true" class="form-control" id="id" [(ngModel)]="pettype.id" name="id"/>
</div>
<div class="form-group has-feedback">
<div class="form-group has-feedback" [class.has-success]="name.dirty && name.valid" [class.has-error]="name.dirty && !name.valid">
<div class="form-group ">
<label class="col-sm-1 control-label">Name</label>
<div class="col-sm-6">
<input id="name" name="name" class="form-control" type="text" [(ngModel)]="pettype.name"/>
<input id="name" name="name" class="form-control" required type="text" [(ngModel)]="pettype.name" #name="ngModel"/>
<span class="glyphicon form-control-feedback" [class.glyphicon-ok]="name.valid" [class.glyphicon-remove]="!name.valid" aria-hidden="true"></span>
<span class="help-block" *ngIf="name.dirty && name.hasError('required')">Name is required</span>
</div>
<button class="btn btn-default" type="submit">Update</button>
<button class="btn btn-default" (click)="onBack()">Cancel</button>
Expand Down
Loading

0 comments on commit 0c06668

Please sign in to comment.