File

src/app/vets/vet-edit/vet-edit.component.ts

Implements

OnInit

Metadata

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

Index

Properties
Methods

Constructor

constructor(formBuilder: FormBuilder, specialtyService: SpecialtyService, vetService: VetService, route: ActivatedRoute, router: Router)
Parameters :
Name Type Optional
formBuilder FormBuilder No
specialtyService SpecialtyService No
vetService VetService No
route ActivatedRoute No
router Router No

Methods

buildForm
buildForm()
Returns : void
compareSpecFn
compareSpecFn(c1: Specialty, c2: Specialty)
Parameters :
Name Type Optional
c1 Specialty No
c2 Specialty No
Returns : boolean
gotoVetList
gotoVetList()
Returns : void
initFormValues
initFormValues()
Returns : void
ngOnInit
ngOnInit()
Returns : void
onSubmit
onSubmit(vet: Vet)
Parameters :
Name Type Optional
vet Vet No
Returns : void

Properties

errorMessage
Type : string
firstNameCtrl
Type : FormControl
idCtrl
Type : FormControl
lastNameCtrl
Type : FormControl
specialtiesCtrl
Type : FormControl
specList
Type : Specialty[]
vet
Type : Vet
vetEditForm
Type : FormGroup
import {Component, OnInit} from '@angular/core';
import {Vet} from '../vet';
import {VetService} from '../vet.service';
import {ActivatedRoute, Router} from '@angular/router';
import {SpecialtyService} from '../../specialties/specialty.service';
import {Specialty} from '../../specialties/specialty';
import {FormBuilder, FormControl, FormGroup, Validators} from '@angular/forms';

@Component({
  selector: 'app-vet-edit',
  templateUrl: './vet-edit.component.html',
  styleUrls: ['./vet-edit.component.css']
})
export class VetEditComponent implements OnInit {
  vetEditForm: FormGroup;
  idCtrl: FormControl;
  firstNameCtrl: FormControl;
  lastNameCtrl: FormControl;
  specialtiesCtrl: FormControl;
  vet: Vet;
  specList: Specialty[];
  errorMessage: string;

  constructor(private formBuilder: FormBuilder, private specialtyService: SpecialtyService,
              private vetService: VetService, private route: ActivatedRoute, private router: Router) {
    this.vet = {} as Vet;
    this.specList = [] as Specialty[];
    this.buildForm();
  }

  buildForm() {
    this.idCtrl = new FormControl(null);
    this.firstNameCtrl = new FormControl('', [Validators.required, Validators.minLength(2)]);
    this.lastNameCtrl = new FormControl('', [Validators.required, Validators.minLength(2)]);
    this.specialtiesCtrl = new FormControl(null);
    this.vetEditForm = this.formBuilder.group({
      id: this.idCtrl,
      firstName: this.firstNameCtrl,
      lastName: this.lastNameCtrl,
      specialties: this.specialtiesCtrl
    });
  }

  compareSpecFn(c1: Specialty, c2: Specialty): boolean {
    return c1 && c2 ? c1.id === c2.id : c1 === c2;
  }

  initFormValues() {
    this.idCtrl.setValue(this.vet.id);
    this.firstNameCtrl.setValue(this.vet.firstName);
    this.lastNameCtrl.setValue(this.vet.lastName);
    this.specialtiesCtrl.setValue(this.vet.specialties);
  }

  ngOnInit() {
    // we use SpecResolver and VetResolver (get data before init component)
    this.specList = this.route.snapshot.data.specs;
    this.vet = this.route.snapshot.data.vet;
    this.vet.specialties = this.route.snapshot.data.vet.specialties;
    this.initFormValues();
  }

  onSubmit(vet: Vet) {
    this.vetService.updateVet(vet.id.toString(), vet).subscribe(
      res => {
        console.log('update success');
        this.gotoVetList();
      },
      error => this.errorMessage = error as any);

  }

  gotoVetList() {
    this.router.navigate(['/vets']);
  }

}
<!--
  ~ /*
  ~  * Copyright 2016-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 Veterinarian</h2>
    <form id="vet_form" class="form-horizontal" (ngSubmit)="onSubmit(vetEditForm.value)" [formGroup]="vetEditForm">
      <div class="form-group" hidden="true">
        <input type="text" hidden="true" class="form-control" id="id" name="id" formControlName="id"/>
      </div>
      <div class="form-group has-feedback" [class.has-success]="firstNameCtrl.dirty && firstNameCtrl.valid" [class.has-error]="firstNameCtrl.dirty &&  !firstNameCtrl.valid">
        <label for="firstName" class="col-sm-2 control-label">First Name</label>
        <div class="col-sm-10">
          <input type="text" class="form-control" id="firstName" name="firstName" formControlName="firstName"/>
          <span class="glyphicon form-control-feedback" [class.glyphicon-ok]="firstNameCtrl.valid" [class.glyphicon-remove]="!firstNameCtrl.valid" aria-hidden="true"></span>
          <span class="help-block" *ngIf="firstNameCtrl.dirty && firstNameCtrl.hasError('required')">First name is required</span>
          <span class="help-block" *ngIf="firstNameCtrl.dirty && firstNameCtrl.hasError('minlength')">First name must be at least 2 characters long</span>
        </div>
      </div>
      <div class="form-group has-feedback" [class.has-success]="lastNameCtrl.dirty && lastNameCtrl.valid" [class.has-error]="lastNameCtrl.dirty && !lastNameCtrl.valid">
        <label for="lastName" class="col-sm-2 control-label">Last Name</label>
        <div class="col-sm-10">
          <input type="text" class="form-control" id="lastName" name="lastName" formControlName="lastName"/>
          <span class="glyphicon form-control-feedback" [class.glyphicon-ok]="lastNameCtrl.valid" [class.glyphicon-remove]="!lastNameCtrl.valid" aria-hidden="true"></span>
          <span class="help-block" *ngIf="lastNameCtrl.dirty && lastNameCtrl.hasError('required')">Last name is required</span>
          <span class="help-block" *ngIf="lastNameCtrl.dirty && lastNameCtrl.hasError('minlength')">Last name must be at least 2 characters long</span>
        </div>
      </div>
      <div class="control-group">
        <div class="form-group ">
          <label for="spec" class="col-sm-2 control-label">Specialties</label>
            <mat-form-field class="col-sm-10">
              <mat-select  [compareWith]="compareSpecFn" id="spec" name="specialties" formControlName="specialties" multiple>
                <mat-option *ngFor="let specialty of specList" [value]="specialty">
                  {{ specialty.name }}
                </mat-option>
              </mat-select>
            </mat-form-field>
        </div>
      </div>
      <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
          <br/>
          <button class="btn btn-default" type="button" (click)="gotoVetList()">< Back</button>
          <button class="btn btn-default" type="submit" [disabled]="vetEditForm.invalid">Save Vet</button>
        </div>
      </div>
    </form>
  </div>
</div>

./vet-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 ""