<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