Angular- validating the form field using adding 4 digits number

 To prevent the letter "e" from being entered as a valid character in an input field of type "number", you can use the "onkeydown" event and check if the "e" key is pressed. If the "e" key is pressed, you can prevent the default behavior of the input field, which is to allow the "e" key to be entered as part of a scientific notation number.

Here's an example of how to prevent the letter "e" from being entered in an input field of type "number" using the "onkeydown" event:

<input type="number" formControlName="frequency" class="form-control" [readOnly]="!isEditable"  inputmode="numeric" pattern="[0-9]*" onKeyPress="if(this.value.length === 4 || event.key === 'e') return false;" />

Angular Router

 

<a [routerLink]="['/auth/login']" class="btn btn-link" class="btn btn-link"> Back to Home</a>

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