Whenever show/hide the dateRangepicker I will reset the field as null.But it set the today date automatically. Couldn't clear the today date with any attribute .ngx-daterangepicker-material version 2.1.8
ts
this.showDate = true;
formData.travelStartDate = null;
html
<div class="col-md-6" *ngIf="showDate">
<div class="form-group">
<label class="control-label required">{{ 'TravelDate' | translate }}</label>
<div class="date-range-picker">
<input type="text" pInputText ngxDaterangepickerMd [maxDate]="today" [showRangeLabelOnInput]="false"
[locale]="{applyLabel: 'ok', format: pageSettings.defaultDateFormat.toUpperCase() }"
[(ngModel)]="formData.travelStartDate" formControlName="fTravelStartDate" [linkedCalendars]="true"
[showClearButton]="true"
class="form-control date-control-input" [timePicker]="false" [opens]="'left'" [singleDatePicker]="true"
[autoApply]="true" />
</div>
</div>
</div>
Related
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.
Here's the scenario that I want : When I click the calendar icon, it will show calendar/date pop up. I'm using bootstrap 4.
This is the result when you run the code
Here's the code :
<!-- DoB -->
<div class="form-group">
<label for="DoB">#yield('DoB')</label>
<div class="input-group" id="DoB">
<input type="text" name="DoB" placeholder="Enter your date of birth"
class="form-control DoB" required data-toggle="DoB">
<div class="input-group-append">
<span class="input-group-text text-muted DoB">
<i class="fa fa-calendar mx-1 DoB"></i>
</span>
</div>
</div>
</div>
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?
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) {}
I have a modal with a form, and some required fields.
When I open the modal I correctly see the fields empty, if I write something in the field required and then I cancel the words writed I correctly see the field as invalid.
The problem is that if I close and reopen the modal I want to see the empty fields like if it's the first time I open it but for some reason I see the previous invalid status also if I reset the form.
This is my modal after I close it, it seems that the status never be resetted:
<form #modelForm="ngForm">
<div class="modal-body" *ngIf="checkpoint">
<div class="row">
<div class="form-group label-floating">
<label class="control-label">{{'checkpoint.table.dialog.labels.name'
| translate }}<span class="star">*</span>
</label> <input class="form-control" id="name" name="name" required
[(ngModel)]="checkpoint.name" #name="ngModel" /><small
[hidden]="name.valid || name.pristine" class="text-danger">
{{'checkpoint.table.validations.required' | translate }}</small>
</div>
</div>
<div class="row">
<div class="form-group label-floating">
<label class="control-label">{{'checkpoint.table.dialog.labels.passStockAlert'
| translate }}</label> <input pattern="[0-9]*"
class="form-control" name="passStockAlert"
id="passStockAlert"
[(ngModel)]="checkpoint.passStockAlert"
#checkPoint="ngModel" /><small
[hidden]="checkPoint.valid || checkPoint.pristine"
class="text-danger">
{{'checkpoint.table.validations.invalid' | translate }}</small>
</div>
</div>
<div class="row">
<div class="category form-category">
<span class="star">*</span> {{ 'form.requiredfields' |
translate }}
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-info btn-round"
(click)="save();resetForm(modelForm)" data-dismiss="modal"
[disabled]="modelForm.form.invalid || modelForm.form.pristine"
label="Save">{{'checkpoint.table.dialog.save' |
translate }}</button>
<button type="button" class="btn btn-danger btn-round"
(click)="resetForm(modelForm)" data-dismiss="modal">{{'checkpoint.table.dialog.close' |
translate }}</button>
</div>
</form>
And this is my reset form method:
resetForm(myForm: NgForm) {
myForm.form.reset();
}
I have successfully implemented this:
my-component.html
<form (ngSubmit)="resetFormFlags(myForm)" #myForm="ngForm">
<h4> title </h4>
<button type="submit"> btnText</button>
</form>
my-component.ts
resetFormFlags(myForm: any) {
myForm.reset();
}
Hope it helps!
Try like this below code :
<form name="modelForm" role="form" novalidate (ngSubmit)="resetForm(modelForm)" #modelForm="ngForm">
<div class="modal-body" *ngIf="checkpoint">
<div class="row">
<div class="form-group label-floating">
<label class="control-label">{{'checkpoint.table.dialog.labels.name'
| translate }}<span class="star">*</span>
</label>
<input class="form-control" id="name" name="name" required [(ngModel)]="checkpoint.name" />
<small [hidden]="!(modelForm.controls.name?.dirty && modelForm.controls.name?.invalid)" class="text-danger">
{{'checkpoint.table.validations.required' | translate }}
</small>
</div>
<button class="btn btn-primary" [disabled]="modelForm.form.invalid" type="submit">{{'checkpoint.table.dialog.save' | translate }}</button>
<button class="btn btn-white" type="button" (click)="resetForm(modelForm)"> {{'checkpoint.table.dialog.close' | translate }}</button>
</div>
</div>
</form>
componen.ts
resetForm(editForm: NgForm) {
editForm.reset();
}