Search This Blog

Thursday, August 29, 2019

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

No comments:

Post a Comment

Validating to select in sequencial order using angular

    < input type = "checkbox" (change) = "handleSelectTaskItem($event, taskItem)" [checked] = " taskItem . i...