Spreadsheet:
The html data entry:
I have been working on this for 8 hours, I cannot figure it out.
I have a website that I am uploading items to be sold. I have a Google sheet that I am keeping track of this information. We will have probably over 3,000 items to sell, so this html would be a lifesaver!
I however cannot get it to populate into my Google sheets. It runs, I don't get error messages, it just won't populate in my sheet.
This is my sheet, it is open
I am teaching myself how to do the website myself, I only have about 3 or 4 months under my belt. Any help would be WONDERFUL!
Code GS
function doGet(request) {
return HtmlService.createTemplateFromFile("Index").evaluate();
}
/* #Include JavaScript and CSS Files */
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename).getContent();
}
/* #Process Form */
function processForm(formObject) {
var url =
"https://docs.google.com/spreadsheets/d/1uF5YBKyfVxvrA4QrUuRqHrxe7C1qEySIxAL_r-PkBIQ/edit#gid=1180254005";
function processForm(formObject) {
var ss = SpreadsheetApp.getActive();
var ws = ss.getSheetByName("Data");
ws.appendRow([
formObject.location,
formObject.itemNumber,
formObject.name,
formObject.description,
formObject.price,
formObject.markedDown,
formObject.pricePaid,
formObject.category,
formObject.sold,
formObject.postedOnline,
]);
}
}
Index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<?!= include('JavaScript'); ?>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-6">
<form id="myForm" onsubmit="handleFormSubmit(this)">
<p class="h4 mb-4 text-center font-weight-bold">Seattle Bound Data</p>
<!-- Row 1 -->
<div class="form-row">
<div class="form-group col-md-4 font-weight-bold">
<label for="first_name">Location</label>
<input type="text" class="form-control" id="location" name="location" placeholder="Location">
</div>
<div class="form-group col-md-4 font-weight-bold">
<label for="itemNumber">Item Number</label>
<input type="text" class="form-control" id="itemNumber" name="itemNumber" placeholder="Item Number">
</div>
<div class="form-group col-md-4 font-weight-bold">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" name="name" placeholder="Name">
</div>
</div>
<!-- Row 1 -->
<!-- Row 2 -->
<div class="form-row">
<div class="form-group col-lg-12 font-weight-bold">
<label for="description">Description</label>
<input type="text" class="form-control" id="description" name="description" placeholder="Description">
</div>
</div>
<!-- Row 2 -->
<!-- Row 3 -->
<div class="form-row">
<div class="form-group col-md-4 font-weight-bold">
<label for="price">Price</label>
<input type="number" class="form-control" id="price" name="price" placeholder="$00.00">
</div>
<div class="form-group col-md-4 font-weight-bold">
<label for="markedDown">Marked Down</label>
<input type="number" class="form-control" id="markedDown" name="markedDown" placeholder="$00.00">
</div>
<div class="form-group col-md-4 font-weight-bold">
<label for="pricePaid">Price Paid</label>
<input type="number" class="form-control" id="pricePaid" name="pricePaid" placeholder="$0.00">
</div>
</div>
<!-- Row 3 -->
<!-- Row 4 -->
<div class="form-row">
<div class="form-group col-sm-6 font-weight-bold">
<label for="categories">Categories</label>
<div class="form-check form-check-inline">
<select name="categories">
<option value="media">Media</option>
<option value="tools">Tools</option>
<option value="clothes">Clothes</option>
<option value="bears">Bears</option>
<option value="misc">Misc</option>
<option value="electronics">Electronics</option>
</select>
<div class="form-group col-sm-6 font-weight-bold">
<p>Sold</p>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="sold" id="true" value="true">
<label class="form-check-label" for="true">True</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="sold" id="false" value="false">
<label class="form-check-label" for="false">False</label>
</div>
</div>
<div class="form-group col-sm-6 font-weight-bold">
<p>Posted Online</p>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="postedOnline" id="true" value="true">
<label class="form-check-label" for="true">True</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="postedOnline" id="false" value="false">
<label class="form-check-label" for="false">False</label>
</div>
</div>
</div>
</div>
</div>
<button type="submit" class="btn btn-primary btn-block">Submit</button>
</form>
<div id="output"></div>
</div>
</div>
</div>
</body>
</html>
JavaScript.html
<script>
// Prevent forms from submitting.
function preventFormSubmit() {
var forms = document.querySelectorAll('form');
for (var i = 0; i < forms.length; i++) {
forms[i].addEventListener('submit', function(event) {
event.preventDefault();
});
}
}
window.addEventListener('load', preventFormSubmit);
function handleFormSubmit(formObject) {
google.script.run.processForm(formObject);
document.getElementById("myForm").reset();
}
</script>
I was able to run the code but with few corrections.
In app script, inside the pocessForm() function you are again declaring a new function with the same name, which is unnecessary and your code does not run because of this. So you should remove the outer function and just keep inner one.
When you deploy your app, the activeSheet function does not work. Instead, use
SpreadsheetApp.openById("")
and give the id of the spreadsheet which you can find in the link of the spreadsheet. These will be the alphanumeric character string. For your sheet it's this - "1uF5YBKyfVxvrA4QrUuRqHrxe7C1qEySIxAL_r-PkBIQ".
function doGet(request) {
return HtmlService.createTemplateFromFile('Index').evaluate();
}
/* #Include JavaScript and CSS Files */
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename).getContent();
}
/* #Process Form */
function processForm(formObject) {
Logger.log(JSON.stringify(formObject));
// var ss = SpreadsheetApp.getActive(); // incorrect
const ss = SpreadsheetApp.openById("");
const ws = ss.getSheetByName('Data');
ws.appendRow([formObject.location,
formObject.itemNumber,
formObject.name,
formObject.description,
formObject.price,
formObject.markedDown,
formObject.pricePaid,
formObject.category,
formObject.sold,
formObject.postedOnline]);
}
And this works.
Suggestion - You may want to handle the form validation. Currently, if a user submits the form with any empty field, app script throws error. Easy way to handle this is by making each input field required in html.
Related
in a Nuxt site I have a form with a field of type "file", and a Name, Email and Message fields.
Name, Email and Message are working flawlessy everytime, instead the "file" field ONLY WORKS when the first page visited is the page where the form is (or it's reloaded). If a user, let's say, land on the homepage and only then reach the form page, the message sent from the form will not contain the file that was attached.
What can cause this? I've already tried to reset the form on the mounted hook, or reset only the "file" field but with no luck.
This is the form component code "TheFormJob.vue":
<template>
<div>
<form name="job" netlify-honeypot="bot-field" method="post" action="/success" data-netlify="true">
<input type="hidden" name="form-name" value="job" >
<p class="hidden">
<label>Don’t fill this out: <input name="bot-field"></label>
</p>
<div class="form">
<div class="form__name">
<input class="form__field" name="name" id="name" :placeholder="$t('contatti.nomeForm')" required >
</div>
<div class="form__email">
<input class="form__field" type="email" name="email" id="email" placeholder="Email*" required >
</div>
<div class="form__upload">
<input class="form__field" type="file" name="fileToUpload" id="fileToUpload" accept=".doc, .docx, .pdf" required>
</div>
<div class="form__textarea">
<textarea class="form__field" name="message" id="message" :placeholder="$t('contatti.messaggioForm')" required></textarea>
</div>
<div class="form__privacy extra-mt">
<label><input type="checkbox" name="privacy" required> {{$t('contatti.privacy')}}</label>
</div>
<div class="form__send extra-mt">
<button class="default-button" type="submit" value="Invia" >{{$t('contatti.invia')}} </button>
</div>
</div>
</form>
</div>
</template>
<script>
export default {
mounted(){
const dis = this
const uploadField = document.getElementById("fileToUpload");
uploadField.onchange = function() {
if(this.files[0].size > 1048576){ // 1MB
alert(dis.$t('lavora.fileAlert'));
}
}
}
}
</script>
In the page "index.vue":
<template>
<div>
<div class="container">
<div class="first row extra-mt5-md is-center">
<div class="col-12 col-4-md text-center" style="padding: 2rem 0">
<h1>{{$t('lavora.title')}}</h1>
</div>
</div>
<div class="second row">
<div class="col-12 col-4-md image" />
<div class="col-12 col-8-md content">
<p>{{$t('lavora.p1')}}</p>
<TheFormJob class="extra-mt5" />
</div>
</div>
<div class="third row">
<div class="col-12">
<nuxt-link class="default-button-full" :to="localePath('contatti')">{{$t('contatti.title')}} → </nuxt-link>
</div>
</div>
</div>
</div>
</template>
I use boostrap form validation on my form for 2 input text only (I do not want to validate radio button).
My problem is that when displaying errors on the input text (a value is required), it disables the radio button and even change the color of the radio button text. How to avoid that ?
Here is the code
<div class="form-group">
<label for="txtDatenaissance">Date de naissance</label>
<input type="text" class="form-control" id="txtDateNaissance"
name="txtDateNaissance" data-provide="datepicker"
placeholder="JJ/MM/YYYY" data-date-format="dd/mm/yyyy" required="required"/>
<div class="invalid-feedback">
La date de naissance est obligatoire
</div>
</div>
<div class="form-group">
<div class="custom-control custom-control-inline custom-radio">
<input type="radio" class="custom-control-input" id="rdoOui" name="rdoRetraite" value="1" />
<label class="custom-control-label" for="rdoOui">Oui</label>
</div>
<div class="custom-control custom-control-inline custom-radio">
<input type="radio" class="custom-control-input" id="rdoNon" name="rdoRetraite" value="0" checked="checked" />
<label class="custom-control-label" for="rdoNon">Non</label>
</div>
</div>
<div id="divMetier" class="form-group d-none">
<label for="txtMetier">Métier exercé</label>
<input type="text" class="form-control" id="txtMetier" name="txtMetier" valueId="0" required="required" />
<div class="invalid-feedback">
Le métier est obligatoire
</div>
</div>
in JS :
$( document ).ready(function() {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
After investigating, the problem seems to with the all the custom classes because it works good if I use form-check classes (so normal button : it is ugly but it works).
Here I placed the radio and submit button outside the form with the help of form attribute
$(document).ready(function() {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<form class="needs-validation" id="formid" novalidate>
<div class="form-group">
<label for="txtDatenaissance">Date de naissance</label>
<input type="text" class="form-control" id="txtDateNaissance" name="txtDateNaissance" data-provide="datepicker" placeholder="JJ/MM/YYYY" data-date-format="dd/mm/yyyy" required="required" />
<div class="invalid-feedback">
La date de naissance est obligatoire
</div>
</div>
<div id="divMetier" class="form-group d-none">
<label for="txtMetier">Métier exercé</label>
<input type="text" class="form-control" id="txtMetier" name="txtMetier" valueId="0" required="required" />
<div class="invalid-feedback">
Le métier est obligatoire
</div>
</div>
</form>
<div class="form-group">
<div class="custom-control custom-control-inline custom-radio">
<input type="radio" class="custom-control-input" id="rdoOui" name="rdoRetraite" value="1" />
<label class="custom-control-label" for="rdoOui">Oui</label>
</div>
<div class="custom-control custom-control-inline custom-radio">
<input type="radio" class="custom-control-input" id="rdoNon" name="rdoRetraite" value="0" checked="checked" />
<label class="custom-control-label" for="rdoNon">Non</label>
</div>
</div>
<button class="btn btn-primary" form="formid" type="submit">Submit form</button>
Using custom class custom-radio-primary
$(document).ready(function() {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
/* custom-radio-primary escapes validation with primary color */
.custom-radio-primary label {
color: #212529!important;
}
.custom-radio-primary .custom-control-input:checked~.custom-control-label::before {
border-color: #007bff!important;
background-color: #007bff!important;
}
.custom-radio-primary .custom-control-input~.custom-control-label::before {
border: #adb5bd solid 1px!important;
}
.custom-radio-primary .custom-control-input:focus~.custom-control-label::before {
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25)!important;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<form class="needs-validation" id="formid" novalidate>
<div class="form-group">
<label for="txtDatenaissance">Date de naissance</label>
<input type="text" class="form-control" id="txtDateNaissance" name="txtDateNaissance" data-provide="datepicker" placeholder="JJ/MM/YYYY" data-date-format="dd/mm/yyyy" required="required" />
<div class="invalid-feedback">
La date de naissance est obligatoire
</div>
</div>
<div class="form-group">
<div class="custom-control custom-control-inline custom-radio custom-radio-primary">
<input type="radio" class="custom-control-input" id="rdoOui" name="rdoRetraite" value="1" />
<label class="custom-control-label" for="rdoOui">Oui</label>
</div>
<div class="custom-control custom-control-inline custom-radio custom-radio-primary">
<input type="radio" class="custom-control-input" id="rdoNon" name="rdoRetraite" value="0" checked="checked" />
<label class="custom-control-label" for="rdoNon">Non</label>
</div>
</div>
<div id="divMetier" class="form-group d-none">
<label for="txtMetier">Métier exercé</label>
<input type="text" class="form-control" id="txtMetier" name="txtMetier" valueId="0" required="required" />
<div class="invalid-feedback">
Le métier est obligatoire
</div>
</div>
<button class="btn btn-primary" form="formid" type="submit">Submit form</button>
</form>
I am using Spring.
The method in my RESTController is this,
http://localhost:8080/delivery-api/training/submit. It is able to save hard code values into database.
This is part of my html form, it can be open up using this URL: http://localhost:8080/delivery-web/training/apply.
<form th:object="${applyForm}" class="form-horizontal" role="form" method="post" action="http://localhost:8080/delivery-api/training/submit" >
<div class="form-group">
<label class="col-sm-3 control-label no-padding-right"
for="form-field-1" > Country </label>
<div class="col-sm-9">
<input type="text" id="form-field-1" placeholder="Country"
class="col-xs-10 col-sm-7" th:field="*{country}" />
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label no-padding-right"
for="form-field-1"> Fee </label>
<div class="col-sm-9">
<input type="text" id="form-field-1" th:field="*{Fee}" class="col-xs-10 col-sm-7" />
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label no-padding-right"
for="form-field-1"> Start Date </label>
<div class="col-sm-9">
<input type="date" id="form-field-1" th:field="*{startDate}"
class="col-xs-10 col-sm-7" />
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label no-padding-right"
for="form-field-1">End Date </label>
<div class="col-sm-9">
<input type="date" id="form-field-1" th:field="*{endDate}"
class="col-xs-10 col-sm-7" />
</div>
</div>
<br> <br>
<button class="btn btn-info" type="submit">
<i class="ace-icon fa fa-check bigger-110"></i> Submit
</button>
</div>
</div>
</form>
When I click on submit, it can be directed to http://localhost:8080/delivery-api/training/submit and insert the hard coded values into database, but it did not direct to my application-form.html page after that.
My controller
#PostMapping(value = "/apply")
public String apply(#Valid #ModelAttribute("applyForm") DeliveryApplicationForm applyForm, BindingResult errors, Model model) {
model.addAttribute("applyForm", applyForm);
return VIEW_PATH + "application-form";
}
I would like to render html page and also pass data from my form to RESTController method through a controller after I click on the submit button in my html page.
May I know how I can do it?
I have this form right here:
<form (ngSubmit)="onSubmit()" #testForm="ngForm">
<div class="form-group col">
<label for="a">a</label>
<select class="form-control" id="a" [(ngModel)]="form.a" name="a" required>
<option value="x">x</option>
<option value="y">y</option>
</select>
</div>
<div class="form-group">
<label for="b">b</label>
<input class="form-control" id="b" [(ngModel)]="form.b" name="b" required />
</div>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input">c
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input">d
</label>
</div>
<div class="col text-right">
<button type="submit" class="btn btn-success" [disabled]="!testForm.form.valid">Submit</button>
</div>
</form>
With this component-code behind:
export class FormComponent {
form = new Form();
submitted = false;
onSubmit() {
this.submitted = true;
}
}
What I want to achieve is that my button only gets enabled, when both the dropdown and the input field are filled in, which works with the required attribute, AND both checkboxes are checked, which doesn't work.
My question: Is there something like required for Checkboxes, or are there other ways to solve this problem?
Try this way:
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" [checked]="ch2" (change)="ch2= !ch2" class="form-check-input">c
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" [checked]="ch1" (change)="ch1= !ch1" class="form-check-input">d
</label>
</div>
<div class="col text-right">
<button type="submit" class="btn btn-success" [disabled]="!testForm.form.valid || !ch1 || !ch2">Submit</button>
</div>
What I am trying to do is -
I am trying to add a form to the existing form but the data not getting stored
what the error coming up -
in the console its showing form connection is missing.. how can I connect it with following code I have?
The code behind the click is something like this:
<button type="submit" class="btn btn-default" routerLink="../viewemployee" [disabled]="empForm.invalid">Add Employee</button>
please refer the link below for the code.. need help to move on from this to solve other tasks.
If it is required to post the code here as well, I will do.Please answer and respond.
Thanx in advance.
How to connect the form in angular routing
createemployee.component.html
<h2>Add Employee:</h2>
<form class="form-horizontal" #empForm="ngForm">
<div class="form-group">
<label class="control-label col-sm-2" for="name">Name:</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="name" minlength="4" maxlength="10" pattern="^[A-Za-z0-9]*[A-Za-z0-9][A-Za-z0-9]\S*$" [(ngModel)]="model.name" placeholder="Enter Your Name"
#name="ngModel" required/>
<div *ngIf="name.invalid && (name.dirty || name.touched)" class="alert alert-danger">
<div *ngIf="name.errors.required">
Name is required.
</div>
<div *ngIf="name.errors.pattern">
No Spaces
</div>
<div *ngIf="name.errors.minlength">
Name must be at least 4 characters long.
</div>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="position">Position:</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="position" minlength="4" maxlength="10" pattern="^[a-z]*$" [(ngModel)]="model.position" placeholder="Enter your position"
#position="ngModel" required />
<div *ngIf="position.invalid && (position.dirty || position.touched)" class="alert alert-danger">
<div *ngIf="position.errors.required">
Position is required.
</div>
<div *ngIf="position.errors.pattern">
Only Alphabets are must be entered
</div>
<div *ngIf="position.errors.minlength">
Position must be at least 4 characters long.
</div>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="salary">Salary:</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="salary" pattern="[0-9]*"
minlength="5" maxlength="7" [(ngModel)]="model.salary" placeholder="Enter Salary" #salary="ngModel" required />
<div *ngIf="salary.invalid && (salary.dirty || salary.touched)" class="alert alert-danger">
<div *ngIf="salary.errors.required">
Salary is required.
</div>
<div *ngIf="salary.errors.minlength">
Salary must be in 5 numbers.
</div>
<div *ngIf="salary.errors.maxlength">
Salary must not be exceeded morethan 7 numbers.
</div>
<div *ngIf="salary.errors?.pattern">Only numebers should be typed
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default" routerLink="../viewemployee" [disabled]="empForm.invalid">Add Employee</button>
<button type="button" class="btn btn-default" routerLink="../home">Cancel</button>
</div>
</div>
</form>
You could change your component as follows:
Add event handler to the form:
<form (ngSubmit)="continue()">
Handle the routing in code:
continue() {
...
this.router.navigateByUrl("../viewemployee");
}
You need to inject the router:
constructor(private router: Router) {}