How integrate angular model driven form in Sharepoint framework

Step1:

Welcome to model driven form,We need to import the ReactiveFormsModule from @angular/forms and use the same in the imports array. app.module.ts

Step2:

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

import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './Components/app.component';

import { HttpClientModule } from '@angular/common/http';

import { FormsModule } from '@angular/forms';

import { ReactiveFormsModule } from '@angular/forms';

@NgModule({

imports: [ BrowserModule, HttpClientModule, FormsModule, ReactiveFormsModule],

declarations: [ AppComponent ],

providers: [ ],

bootstrap: [ AppComponent ] ,

})

export class AppModule {}

Step3:

Angular Form Design

<form (ngSubmit)="onSubmit(regForm)" [formGroup]="regForm">

<div class="borderbtm">

<div class="row">

<div class="col-md-6 box-body">

<div class="form-group">

<div class="col-md-12">

<label> Start Date</label>

</div>

<div class="col-md-12">

<div class="input-group date datetimepicker">

<input type="text" formControlName="startdate" name="startdate" class="form-control"/>

<span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div>

</div>

</div>

</div>

<div class="col-md-6 box-body">

<div class="form-group">

<div class="col-md-12">

<label> End Date</label>

</div>

<div class="col-md-12">

<div class="input-group date datetimepicker">

<input type="text" formControlName="enddate" name="enddate" class="form-control" />

<span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div>

</div>

</div>

</div>

</div>

</div>

<div class="box-footer" style="text-align:center; padding-top: 20px;">

<button class="btn btn-default clear" style="padding-right: 20px;" type="cancel">CLEAR</button>

<button class="btn btn-primary" type="submit">SUBMIT</button>

</div>

</form>

step 4

App.component.ts design below

import { Component, Input, OnInit, Inject, ViewEncapsulation } from '@angular/core';

import {IWebPartContext} from '@microsoft/sp-webpart-base';

import { SPHttpClient, SPHttpClientResponse, ISPHttpClientOptions } from '@microsoft/sp-http';

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

export interface ISPLists {

value: ISPList[];

}

export interface ISPList {

Title: string;

Id: string;

}

@Component({

moduleId: module.id, // this is the key

selector: 'my-spfx-app',

template: require("./app.component.html") as string

//templateUrl: './app.component.html'

//styleUrls : ['./app.component.css']

// styleUrls : ['./app.component.css']

//styles: ['./app.component.css']

})

export class AppComponent implements OnInit {

public name: string = '';

public context:IWebPartContext;

showGrid = true;

employeeitems :any;

regForm:FormGroup;

employeeleaveitems;

constructor(private formbuilder: FormBuilder){ }

public ngOnInit() {

this.setFormState();

this.getleavelist();

}

setFormState():void

{

this.regForm = this.formbuilder.group({

startdate : ['',[Validators.required]],

enddate : ['',[Validators.required]]

});

}

getleavelist()

{

this.context= window["webPartContext"];

this.name= this.context.pageContext.user.displayName;

this._getListData()

.then((response) => {

console.log(response);

this._renderList(response.value);

console.log(response.value);

});

}

onSubmit()

{

debugger;

let leaves = this.regForm.value;

console.log(leaves);

this.leavepost(leaves);

}

addleaves()

{

this.showGrid = false;

}

private _getListData(): Promise<ISPLists> {

debugger;

return this.context.spHttpClient.get(this.context.pageContext.web.absoluteUrl + "/_api/web/lists/GetByTitle('SpfxLeave')/items", SPHttpClient.configurations.v1)

.then((response: SPHttpClientResponse) => {

debugger;

console.log(response);

return response.json();

});

}

private _renderList(items: ISPList[]): void {

this.employeeleaveitems =items;

}

leavepost(leaves:any) {

var itemType = "SP.Data.SpfxLeaveListItem";

var absoluteUri = this.context.pageContext.web.absoluteUrl;

const itemData: any = {

"__metadata": { "type": itemType },

'startdate':leaves.startdate,

'enddate': leaves.enddate,

'name': 'tentant name',

'leavetype': 'sick leave'

};

const itemHeader: any = {

'Accept': 'application/json;odata=nometadata',

'Content-type': 'application/json;odata=verbose',

'odata-version': '',

"X-HTTP-Method": "POST"

};

const spHttpClientOptions: ISPHttpClientOptions = {

"headers": itemHeader,

"body": JSON.stringify(itemData)

};

this.context.spHttpClient.post(

absoluteUri + "/_api/web/lists/GetByTitle('SpfxLeave')/items",

SPHttpClient.configurations.v1,

spHttpClientOptions);

}

}

step5:

Here's my tsconfig.json :

Add the below line without fail.

"emitDecoratorMetadata": true,

Enjoy Folks