import { Component, Inject } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { HttpClient } from '@angular/common/http';

@Component({
    selector: 'departments-add',
    templateUrl: './add.component.html'
})
export class DepartmentsAddComponent {
    form: FormGroup;
    
    constructor(private formBuilder: FormBuilder,
    private httpClient: HttpClient) {
        this.form = this.formBuilder.group({
            "name": ["", Validators.required],
            "shortName": [""]
        });
    }

    submit(form:any) {
        this.httpClient.put("/api/departments/add", form).subscribe(e=>{});
    }
}

import { Component, Inject } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';

@Component({
    selector: 'departments-add',
    templateUrl: './add.component.html'
})
export class DepartmentsAddComponent {
    form: FormGroup;
    
    constructor(private formBuilder: FormBuilder) {
        this.form = this.formBuilder.group({
            "name": ["", Validators.required],
            "shortName": [""]
        });
    }
}

--- 
+++ 
@@ -1,5 +1,6 @@
 import { Component, Inject } from '@angular/core';
 import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { HttpClient } from '@angular/common/http';
 
 @Component({
     selector: 'departments-add',
@@ -8,10 +9,15 @@
 export class DepartmentsAddComponent {
     form: FormGroup;
     
-    constructor(private formBuilder: FormBuilder) {
+    constructor(private formBuilder: FormBuilder,
+    private httpClient: HttpClient) {
         this.form = this.formBuilder.group({
             "name": ["", Validators.required],
             "shortName": [""]
         });
     }
+
+    submit(form:any) {
+        this.httpClient.put("/api/departments/add", form).subscribe(e=>{});
+    }
 }
Add submit handler and configure it to send form value to DepartmentController
