Skip to content

Commit

Permalink
Merge pull request spring-petclinic#10 from arey/feature/validation
Browse files Browse the repository at this point in the history 
Validation on the owner add page + redirect
  • Loading branch information
@vfedoriv
vfedoriv authored Mar 28, 2017
2 parents 5ea8e91 + 26310ca commit e1a2999
Show file tree
Hide file tree
Showing 3 changed files with 49 additions and 35 deletions.
73 changes: 42 additions & 31 deletions src/app/owners/owner-add/owner-add.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,46 +22,57 @@ <h2>
New Owner
</h2>
<form (ngSubmit)="onSubmit(ownerForm.value)" #ownerForm="ngForm" class="form-horizontal">
<div class="form-group has-feedback">
<div class="form-group" hidden="true">
<input type="text" name="id" hidden="true" class="form-control" id="id" [(ngModel)]="owner.id"/>
</div>
<div class="form-group ">
<label class="col-sm-2 control-label">First Name</label>
<div class="col-sm-10">
<input id="firstName" name="firstName" class="form-control" type="text" [(ngModel)]="owner.firstName"/>
</div>
<div class="form-group" hidden="true">
<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.dirty && firstName.valid" [class.has-error]="firstName.dirty && !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>
</div>
<div class="form-group ">
<label class="col-sm-2 control-label">Last Name</label>
<div class="col-sm-10">
<input id="lastName" name="lastName" class="form-control" type="text" [(ngModel)]="owner.lastName"/>
</div>
</div>
<div class="form-group has-feedback" [class.has-success]="lastName.dirty && lastName.valid" [class.has-error]="lastName.dirty && !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>
</div>
<div class="form-group ">
<label class="col-sm-2 control-label">Address</label>
<div class="col-sm-10">
<input id="address" name="address" class="form-control" type="text" [(ngModel)]="owner.address"/>
</div>
</div>
<div class="form-group has-feedback" [class.has-success]="address.dirty && address.valid" [class.has-error]="address.dirty && !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>
</div>
<div class="form-group ">
<label class="col-sm-2 control-label">City</label>
<div class="col-sm-10">
<input id="city" name="city" class="form-control" type="text" [(ngModel)]="owner.city"/>
</div>
</div>
<div class="form-group has-feedback" [class.has-success]="city.dirty && city.valid" [class.has-error]="city.dirty && !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>
</div>
<div class="form-group ">
<label class="col-sm-2 control-label">Telephone</label>
<div class="col-sm-10">
<input id="telephone" name="telephone" class="form-control" type="text" [(ngModel)]="owner.telephone"/>
</div>
</div>
<div class="form-group has-feedback" [class.has-success]="telephone.dirty && telephone.valid" [class.has-error]="telephone.dirty && !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>
</div>

</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button class="btn btn-default" type="button" (click)="gotoOwnersList()">Back</button>
<button class="btn btn-default" type="submit" [disabled]="added_success">Add Owner</button>
<button class="btn btn-default" type="submit" [disabled]="!ownerForm.valid">Add Owner</button>
</div>
</div>
</form>
Expand Down
5 changes: 2 additions & 3 deletions src/app/owners/owner-add/owner-add.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,6 @@ export class OwnerAddComponent implements OnInit {

owner: Owner;
errorMessage: string;
added_success: boolean = false;

constructor(private ownerService: OwnerService, private router: Router) {
this.owner = <Owner>{};
Expand All @@ -47,8 +46,8 @@ export class OwnerAddComponent implements OnInit {
owner.id = null;
this.ownerService.addOwner(owner).subscribe(
new_owner => {
this.added_success = true;
return this.owner = new_owner;
this.owner = new_owner;
this.gotoOwnersList();
},
error => this.errorMessage = <any>error
);
Expand Down
6 changes: 5 additions & 1 deletion src/app/owners/owner-edit/owner-edit.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@ export class OwnerEditComponent implements OnInit {
}

onSubmit(owner) {
var that = this;
this.ownerService.updateOwner(owner.id.toString(), owner).subscribe(
get_result,
get_error
Expand All @@ -61,7 +62,8 @@ export class OwnerEditComponent implements OnInit {
function get_result(update_status) {
console.log(update_status);
if (update_status.status === 204) {
return console.log('update success');
console.log('update success');
that.gotoOwnerDetail(owner);
} else {
return console.log('update failed');
}
Expand All @@ -72,4 +74,6 @@ export class OwnerEditComponent implements OnInit {
this.router.navigate(['/owners', owner.id]);
}



}

0 comments on commit e1a2999

Please sign in to comment.