File

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

Implements

OnInit

Metadata

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

Index

Properties
Methods
Inputs

Constructor

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

Inputs

currentType
Type : PetType

Methods

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

Properties

addedSuccess
Default value : false
currentOwner
Type : Owner
errorMessage
Type : string
pet
Type : Pet
petTypes
Type : PetType[]
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.
 *
 */

Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""