Raised error in console like cannot read property 'fname' of undefined at object.eval [as updatedirectives] (usercomponent.html:23)

See more:

angular-cli

Angular5

<input name="Fname" #Fname="ngModel" [(ngModel)]="userService.userDatadetail.Fname" required />
<div *ngIf="Fname.Invalid && Fname.touched"> Fisrt name is required.


<input name="Mname" #Mname="ngModel" [(ngModel)]="userService.userDatadetail.Mname" required />
<div *ngIf="Mname.Invalid && Mname.touched"> Middle name is required.



<input name="Lname" #Lname="ngModel" [(ngModel)]="userService.userDatadetail.Lname" required />
<div *ngIf="Lname.Invalid && Lname.touched"> Last name is required.

<input type="button" [disabled]="!regForm.valid" value="submit">






and my user.component.is is like given belowe

import { Component, OnInit } from '@angular/core';
import { NgForm } from '@angular/forms';
import { UserService } from '../../shared/services/user.service'


@Component({
selector: 'app-user',
templateUrl: './user.component.html',
styleUrls: ['./user.component.css'],
providers:[UserService]
})

export class UserComponent implements OnInit {

constructor(public userService : UserService) { }

ngOnInit() {
this.resetForm();
}

resetForm(form? : NgForm)
{
if(form !=null)
{
form.reset();
this.userService.userDatadetail = { StudentId : null,
Fname : '',
Mname : '',
Lname : ''
}
}
}

sendUserDetail(form : NgForm)
{
this.userService.submitUserDetail(form.value)
.subscribe(data=>{this.resetForm(form); })
}

}


and my service like this given below

import { Injectable } from '@angular/core';

import {Http, Response, Headers, RequestOptions, RequestMethod } from '@angular/http';

import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/toPromise';


import {UserModule} from '../module/user/user.module'
// import { request } from 'http';

@Injectable()
export class UserService {

userDatadetail : UserModule;

constructor(public http : Http) {

}

submitUserDetail(user : UserModule)
{
var submitUserDetail = JSON.stringify(user);
var headersOption = new Headers({'Content-Type': 'application/json'});
var RequestOptions = new RequestOptions({method : RequestMethod.Post, headers : headersOption});
return this.http.post('http://localhost:4200/StudentInfo/UpsertStudentInfo', submitUserDetail, RequestOptions).map(x=>x.json())
}

}

What I have tried:

and i want try to submit form data for learning angular js5