File

libs/employee-management/src/add-employee/add-employee.component.ts

Metadata

selector add-employee
templateUrl ./add-employee.component.html

Index

Properties
Methods

Constructor

constructor(api: EmployeeApi, nav: EmployeeNavigation, fb: FormBuilder, route: ActivatedRoute)
Parameters :
Name Type Optional
api EmployeeApi no
nav EmployeeNavigation no
fb FormBuilder no
route ActivatedRoute no

Methods

cancelClicked
cancelClicked()
Returns : void
saveClicked
saveClicked()
Returns : void

Properties

containerFormGroup
containerFormGroup: FormGroup
Type : FormGroup
import { Component} from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';
import { ActivatedRoute } from '@angular/router';

import { EmployeeApi } from '@enterprise-example/employee-api';

import { EmployeeNavigation } from '../employee-navigation.service';

@Component({
  selector: 'add-employee',
  templateUrl: './add-employee.component.html'
})
export class AddEmployeeComponent {
  containerFormGroup: FormGroup;

  constructor(private api: EmployeeApi, private nav: EmployeeNavigation,
    fb: FormBuilder, route: ActivatedRoute) {
    this.nav.calculateModuleBaseRoute(route);
    this.containerFormGroup = fb.group({});
  }

  cancelClicked() {
    this.nav.list();
  }

  saveClicked() {
    this.api.saveNew({
      ...this.containerFormGroup.value.employee
    }).subscribe(_x => this.nav.list());
  }
}
<section class="card">
  <div class="card-content">
    <div class="card-title">Add employee</div>

    <form [formGroup]="containerFormGroup">
      <employee-fields [parentFormGroup]="containerFormGroup"></employee-fields>

      <button type="button" class="btn" (click)="saveClicked()"
        [class.disabled]="false">Save</button>
      <button type="button" class="btn" (click)="cancelClicked()"
        [class.disabled]="false">Cancel</button>
    </form>

  </div>
</section>
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""