File

src/app/pets/pet-edit/pet-edit.component.ts

Implements

OnInit

Metadata

selector app-pet-edit
styleUrls ./pet-edit.component.css
templateUrl ./pet-edit.component.html

Index

Properties
Methods
Inputs

Constructor

constructor(petService: PetService, petTypeService: PetTypeService, router: Router, route: ActivatedRoute)
Parameters :
Name Type Optional
petService PetService No
petTypeService PetTypeService No
router Router No
route ActivatedRoute No

Inputs

currentType
Type : PetType

Methods

gotoOwnerDetail
gotoOwnerDetail(owner: Owner)
Parameters :
Name Type Optional
owner Owner No
Returns : void
ngOnInit
ngOnInit()
Returns : void
onSubmit
onSubmit(pet: Pet)
Parameters :
Name Type Optional
pet Pet No
Returns : void

Properties

currentOwner
Type : Owner
errorMessage
Type : string
pet
Type : Pet
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>

./pet-edit.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.
 *
 */

Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""