how to access form value in ts component - angular 6

Question

I know so many answer are available but I install angular 6 version now form value is not submitted! I add console screen shot blow any one tell me where I am wrong.
HTML

<div class="container">
   <div class="row">
     <form (ngSubmit)="onSubmit(f)" #f="ngForm" class="jumbotron">
       <input class="form-control" type="text" name="fName" ngModel>
       <input class="form-control" type="text" name="lName" ngModel>
       <button type="submit" class="btn btn-primary">Add</button>
    </form>
  </div>
</div>

TS component

import { Component } from '@angular/core';
import { NgForm } from '@angular/forms';    
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  arr: any[]=[];    
  onSubmit(form : NgForm) {
    this.arr = form.value
    console.log('array', this.arr);
    console.log('value', form.value);
   }
}

Answer 1

To see the values of the objects you can json prettifier it like so:

onSubmit(form:NgForm ) {
    this.arr = form.value;
    console.log(JSON.stringify( this.arr));
    console.log(JSON.stringify( form.value));
   }

This will take a JSON object string and return it pretty-printed/formatted