File
Implements
Metadata
| selector |
app-pet-edit |
| styleUrls |
./pet-edit.component.css |
| templateUrl |
./pet-edit.component.html |
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
Methods
|
gotoOwnerDetail
|
gotoOwnerDetail(owner: Owner)
|
|
|
Parameters :
| Name |
Type |
Optional |
| owner |
Owner
|
No
|
|
|
onSubmit
|
onSubmit(pet: Pet)
|
|
|
Parameters :
| Name |
Type |
Optional |
| pet |
Pet
|
No
|
|
|
currentOwner
|
Type : Owner
|
|
|
|
petTypes
|
Type : PetType[]
|
|
|
import {Component, Input, OnInit} from '@angular/core';
import {Pet} from '../pet';
import {PetService} from '../pet.service';
import {ActivatedRoute, Router} from '@angular/router';
import {Owner} from '../../owners/owner';
import {PetType} from '../../pettypes/pettype';
import {PetTypeService} from '../../pettypes/pettype.service';
import * as moment from 'moment';
@Component({
selector: 'app-pet-edit',
templateUrl: './pet-edit.component.html',
styleUrls: ['./pet-edit.component.css']
})
export class PetEditComponent implements OnInit {
pet: Pet;
@Input() currentType: PetType;
currentOwner: Owner;
petTypes: PetType[];
errorMessage: string;
constructor(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 petId = this.route.snapshot.params.id;
this.petService.getPetById(petId).subscribe(
pet => {
this.pet = pet;
this.currentOwner = this.pet.owner;
this.currentType = this.pet.type;
},
error => this.errorMessage = error as any);
}
onSubmit(pet: Pet) {
pet.type = this.currentType;
const that = this;
// format output from datepicker to short string yyyy/mm/dd format
pet.birthDate = moment(pet.birthDate).format('YYYY/MM/DD');
this.petService.updatePet(pet.id.toString(), pet).subscribe(
res => this.gotoOwnerDetail(this.currentOwner),
error => this.errorMessage = error as any
);
}
gotoOwnerDetail(owner: Owner) {
this.router.navigate(['/owners', owner.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>
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>
<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 class="control-group">
<div class="form-group ">
<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">
<option *ngFor="let type of petTypes"
[selected]="type.id == currentType.id ? true : null"
[ngValue]="type">{{ type.name }}
</option>
</select>
</div>
</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(pet.owner)">< Back</button>
<button class="btn btn-default" type="submit">Update Pet</button>
</div>
</div>
</form>
</div>
</div>
/*
*
* * 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.
*
*/
Legend
Html element with directive