File

src/app/pettypes/pettype-edit/pettype-edit.component.ts

Implements

OnInit

Metadata

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

Index

Properties
Methods

Constructor

constructor(pettypeService: PetTypeService, route: ActivatedRoute, router: Router)
Parameters :
Name Type Optional
pettypeService PetTypeService No
route ActivatedRoute No
router Router No

Methods

ngOnInit
ngOnInit()
Returns : void
onBack
onBack()
Returns : void
onSubmit
onSubmit(pettype: PetType)
Parameters :
Name Type Optional
pettype PetType No
Returns : void

Properties

errorMessage
Type : string
pettype
Type : PetType
import {Component, OnInit} from '@angular/core';
import {PetType} from '../pettype';
import {PetTypeService} from '../pettype.service';
import {ActivatedRoute, Router} from '@angular/router';

@Component({
  selector: 'app-pettype-edit',
  templateUrl: './pettype-edit.component.html',
  styleUrls: ['./pettype-edit.component.css']
})
export class PettypeEditComponent implements OnInit {
  pettype: PetType;
  errorMessage: string;

  constructor(private pettypeService: PetTypeService, private route: ActivatedRoute, private router: Router) {
    this.pettype = {} as PetType;
  }

  ngOnInit() {
    const pettypeId = this.route.snapshot.params.id;
    this.pettypeService.getPetTypeById(pettypeId).subscribe(
      pettype => this.pettype = pettype,
      error => this.errorMessage = error as any);
  }

  onSubmit(pettype: PetType) {
    this.pettypeService.updatePetType(pettype.id.toString(), pettype).subscribe(
      res => {
        console.log('update success');
        this.onBack();
      },
      error => this.errorMessage = error as any);

  }

  onBack() {
    this.router.navigate(['/pettypes']);
  }

}
<!--
  ~ /*
  ~  * Copyright 2017-2018 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>Edit Pet Type</h2>
    <form id="pettype" class="form-horizontal" (ngSubmit)="onSubmit(pettypeForm.value)" #pettypeForm="ngForm">
      <div class="form-group" hidden="true">
        <input type="text" hidden="true" class="form-control" id="id" [(ngModel)]="pettype.id" name="id"/>
      </div>
      <div class="form-group has-feedback">
        <div class="form-group ">
          <label class="col-sm-1 control-label">Name</label>
          <div class="col-sm-6">
            <input id="name" name="name" class="form-control" type="text" [(ngModel)]="pettype.name"/>
          </div>
          <button class="btn btn-default" type="submit">Update</button>
          <button class="btn btn-default" (click)="onBack()">Cancel</button>
        </div>
      </div>
    </form>
  </div>
</div>

./pettype-edit.component.css

Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""