src/app/pets/pet-add/pet-add.component.ts
| selector | app-pet-add |
| styleUrls | ./pet-add.component.css |
| templateUrl | ./pet-add.component.html |
Properties |
Methods |
Inputs |
constructor(ownerService: OwnerService, petService: PetService, petTypeService: PetTypeService, router: Router, route: ActivatedRoute)
|
||||||||||||||||||
|
Defined in src/app/pets/pet-add/pet-add.component.ts:46
|
||||||||||||||||||
|
Parameters :
|
| currentType | |
Type : PetType
|
|
|
Defined in src/app/pets/pet-add/pet-add.component.ts:42
|
|
| gotoOwnerDetail |
gotoOwnerDetail()
|
|
Defined in src/app/pets/pet-add/pet-add.component.ts:83
|
|
Returns :
void
|
| ngOnInit |
ngOnInit()
|
|
Defined in src/app/pets/pet-add/pet-add.component.ts:56
|
|
Returns :
void
|
| onSubmit | ||||||
onSubmit(pet: Pet)
|
||||||
|
Defined in src/app/pets/pet-add/pet-add.component.ts:69
|
||||||
|
Parameters :
Returns :
void
|
| addedSuccess |
Default value : false
|
|
Defined in src/app/pets/pet-add/pet-add.component.ts:45
|
| currentOwner |
Type : Owner
|
|
Defined in src/app/pets/pet-add/pet-add.component.ts:43
|
| errorMessage |
Type : string
|
|
Defined in src/app/pets/pet-add/pet-add.component.ts:46
|
| pet |
Type : Pet
|
|
Defined in src/app/pets/pet-add/pet-add.component.ts:41
|
| petTypes |
Type : PetType[]
|
|
Defined in src/app/pets/pet-add/pet-add.component.ts:44
|
import {Component, Input, OnInit} from '@angular/core';
import {Pet} from '../pet';
import {PetType} from '../../pettypes/pettype';
import {Owner} from '../../owners/owner';
import {ActivatedRoute, Router} from '@angular/router';
import {PetTypeService} from '../../pettypes/pettype.service';
import {PetService} from '../pet.service';
import {OwnerService} from '../../owners/owner.service';
import * as moment from 'moment';
@Component({
selector: 'app-pet-add',
templateUrl: './pet-add.component.html',
styleUrls: ['./pet-add.component.css']
})
export class PetAddComponent implements OnInit {
pet: Pet;
@Input() currentType: PetType;
currentOwner: Owner;
petTypes: PetType[];
addedSuccess = false;
errorMessage: string;
constructor(private ownerService: OwnerService, private petService: PetService,
private petTypeService: PetTypeService, private router: Router, private route: ActivatedRoute) {
this.pet = {} as Pet;
this.currentOwner = {} as Owner;
this.currentType = {} as PetType;
this.petTypes = [];
}
ngOnInit() {
this.petTypeService.getPetTypes().subscribe(
pettypes => this.petTypes = pettypes,
error => this.errorMessage = error as any);
const ownerId = this.route.snapshot.params.id;
this.ownerService.getOwnerById(ownerId).subscribe(
response => {
this.currentOwner = response;
},
error => this.errorMessage = error as any);
}
onSubmit(pet: Pet) {
pet.id = null;
pet.owner = this.currentOwner;
// format output from datepicker to short string yyyy/mm/dd format
pet.birthDate = moment(pet.birthDate).format('YYYY/MM/DD');
this.petService.addPet(pet).subscribe(
newPet => {
this.pet = newPet;
this.addedSuccess = true;
this.gotoOwnerDetail();
},
error => this.errorMessage = error as any);
}
gotoOwnerDetail() {
this.router.navigate(['/owners', this.currentOwner.id]);
}
}
<!--
~ /*
~ * Copyright 2016-2017 the original author or authors.
~ *
~ * Licensed under the Apache License, Version 2.0 (the "License");
~ * you may not use this file except in compliance with the License.
~ * You may obtain a copy of the License at
~ *
~ * http://www.apache.org/licenses/LICENSE-2.0
~ *
~ * Unless required by applicable law or agreed to in writing, software
~ * distributed under the License is distributed on an "AS IS" BASIS,
~ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
~ * See the License for the specific language governing permissions and
~ * limitations under the License.
~ */
-->
<div class="container-fluid">
<div class="container xd-container">
<h2>
Add Pet
</h2>
<form class="form-horizontal" (ngSubmit)="onSubmit(petForm.value)" #petForm="ngForm">
<div class="form-group" hidden="true">
<input type="text" hidden="true" class="form-control" id="id" [(ngModel)]="pet.id" name="id"/>
<input type="text" hidden="true" class="form-control" id="owner" [(ngModel)]="pet.owner" name="owner"/>
</div>
<div class="form-group">
<label for="owner" class="col-sm-2 control-label">Owner</label>
<div class="col-sm-10">
<input id="owner_name" name="owner_name" class="form-control" type="text"
value="{{ currentOwner.firstName }} {{ currentOwner.lastName }}" readonly/>
</div>
</div>
<br/>
<div class="form-group ">
<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"/>
</div>
</div>
<div class="form-group ">
<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">
<mat-datepicker-toggle matSuffix [for]="birthDateDatepicker"></mat-datepicker-toggle>
<mat-datepicker #birthDateDatepicker></mat-datepicker>
</div>
</div>
<div class="control-group">
<div class="form-group ">
<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">
<option *ngFor="let type of petTypes"
[ngValue]="type">{{ type.name }}
</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<br/>
<button class="btn btn-default" type="button" (click)="gotoOwnerDetail()">< Back</button>
<button class="btn btn-default" type="submit">Save Pet</button>
</div>
</div>
</form>
</div>
</div>
./pet-add.component.css
/*
*
* * Copyright 2016-2017 the original author or authors.
* *
* * Licensed under the Apache License, Version 2.0 (the "License");
* * you may not use this file except in compliance with the License.
* * You may obtain a copy of the License at
* *
* * http://www.apache.org/licenses/LICENSE-2.0
* *
* * Unless required by applicable law or agreed to in writing, software
* * distributed under the License is distributed on an "AS IS" BASIS,
* * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* * See the License for the specific language governing permissions and
* * limitations under the License.
*
*/