File
Metadata
selector |
add-employee |
templateUrl |
./add-employee.component.html |
Methods
cancelClicked
|
cancelClicked()
|
|
|
saveClicked
|
saveClicked()
|
|
|
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 with directive