Step 1: create a data-service.ts file in data folder
Note: ng command – ng g s data

import user-settings file

import { UserSettings } from './user-settings';
import { Injectable } from '@angular/core';
import { Observable, of } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  constructor() { }

  postUserSettingsForm(userSettings: UserSettings): Observable<any>{  
    return of(userSettings);
  }
} 

Step 2:
in user-settings-form.component.ts file
import bellow those two files

import { DataService } from './../data/data.service';
import { UserSettings } from './../data/user-settings';

constructor(private dataService: DataService) { }
  onSubmit(form: NgForm){
    console.log('in onSubmmit: ', form.value);
       this.dataService.postUserSettingsForm(this.userSettings).subscribe(
         result => console.log('success: ', result),
         error => console.log('error: ', error)
       );
  }

Step 3: in user-settings-form.component.html file

<form #form="ngForm" (ngSubmit)="onSubmit(form)">
    <div class="form-group">
        <label for="name">Name</label>
        <input id="name" name="name" class="form-control" [(ngModel)]="userSettings.name" />
    </div>
</form>

{{userSettings | json}}