Angular, Get and show submit time after click submit button - html

Is it possible to get the date and time when the user click the submit button in angular? For example i have a form with name and email input. When user done filling the input and click submit, the date and time will be showed to the table along with name and email. Here some snippets:
//app.service.ts
insertData(data: App) {
this.dataList.push({
name: data.name,
email: data.email,
});
}
//app.component.ts
onSubmit(form: NgForm) {
this.AppService.insertData(this.AppService.selectedData);
}
<!--app.component.html-->
<form #dataForm="ngForm" (ngSubmit)="onSubmit(dataForm)">
<label>Name</label>
<input class="form-control" name="nama" #nama="ngModel" [(ngModel)]="AppService.selectedData.name"><br>
<label>Email</label>
<input class="form-control" name="email" #email="ngModel" [(ngModel)]="AppService.selectedData.email"><br>
<button type="submit">Submit</button>
</form>
<table>
<tr>
<th>Name</th>
<th>Email</th>
<th>Time submitted</th>
</tr>
<tr *ngFor="let data of data">
<td>data.name</td>
<td>data.email</td>
<td>Time submitted</td>
</tr>
</table>

Just do :
this.dataList.push({
nama: data.nama,
email: data.email,
time : new Date(),
});
This will store the current time when you are inserting data and then use simply on the template side.
{{data.time | date: 'dd/MM/yyyy'}}

Related

Validation not working for radio button in angular

Validation not working for radio button in Angular.
When radio button is not selected, form is getting submitted.
Also not showing error.
HTML Code
<form [formGroup]="feedbackFormWithArray" (ngSubmit)="submitData()">
<table class="res-tbl">
<tbody formArrayName="skills" class="tbl">
<tr class="skill-tr table-data" *ngFor="let skill of skills; let i = index">
<td class="table-data res-td tbl-border skill-td">
<b value="skill.skillId"><span class="text-danger">*</span>{{skill.skillName}}<span>:</span></b><p class="skill-description-p"> {{skill.skillDescription}}</p>
</td>
<td class="table-data center rating-td">
<input type="radio" formControlName="{{ i }}" [value]="3" />
</td>
<td class="table-data center rating-td">
<input type="radio" formControlName="{{ i }}" [value]="2" />
</td>
<td class="table-data center rating-td">
<input type="radio" formControlName="{{ i }}" [value]="1" />
</td>
</tr>
</tbody>
<div *ngIf="(submitted && skills.invalid)">
<small *ngIf="skills.errors?.required" class="text-danger">Please select Skills</small>
</div>
</table>
<Button type="submit" [disabled]="feedbackFormWithArray.invalid" class="btn button-btn" >{{feedbackId ? 'Update' : 'Create'}}</Button>
</form>
TS Code
import { Validators } from '#angular/forms';
submitted : boolean = false;
this.feedbackFormWithArray= this.fb.group({
skills: this.fb.array(
this.skills.map((t) => {
this.fb.control(t);
}), {validators: Validators.required}
)
});
submitData() {
this.submitted = true;
}
How to solve this?
Thank you!
I am gonna guess you have a button inside your form, something like:
component.html
<button (click)="submitData()">Submit</button>
You could add a check to change submitted state like
submitData() {
if (this.feedbackFormWithArray.valid) {
this.submitted = true;
}
if (this.feedbackFormWithArray.invalid) {
// Do something like this.tryToSubmitWithError = true
// Popup to say you cannot submit
// ...
}
}
I think also you wanted to use feedbackFormWithArray instead of skills in the *ngIf below:
<div *ngIf="(submitted && skills.invalid)">
<small *ngIf="skills.errors?.required" class="text-danger">Please select Skills</small>
</div>
That could be like:
<div *ngIf="tryToSubmitWithError && feedbackFormWithArray.invalid">
<small *ngIf="feedbackFormWithArray.errors?.required" class="text-danger">
Please select Skills
</small>
</div>

.Net Core MVC: How to capture multiple Buttons inside single Form with one Postmethod?

I have a table, which gets filled at Runtime. In the last Row I want to add one button to each Column and when one button is pressed it shall Link to the same Post method, but with a different value.
<form method="post" asp-action="ChangeAll">
<input asp-for="DataId" type="hidden" />
<table>
<thead>
.....
</thead>
<tbody>
....data dynamically loaded
(
<td>
<input type="checkbox" name="boxes" value="#Model.RowId" />
</td> )
//last Row:
<tr>
<td>
<input type="submit" value="Update" />
<input type="hidden" name="selectedAction" value="#MyEnum.Value1" hidden />
</td>
......
<td>
<input type="submit" value="Update" />
<input type="hidden" name="selectedAction" value="#MyEnum.Value20" hidden />
</td>
</tr>
</tbody>
</table>
</form>
[HttpPost]
public async Task<IActionResult> ChangeAll(int[] boxes, int DataId, string
selectedAction){
The problem with the above is that no matter what button I click, it always posts back the value of the first button (MyEnum.Value1).
I have tried to add an asp-action="ChangeAll" to each button, but the behaviour stays the same.
So, how can I get the value of the Button I actually clicked?
In your code, All the hidden input have the same name, So when you submit the form. It will bind the first one. You can change your code like this:
<form method="post" asp-action="ChangeAll" id="Form">
.....
<input type="hidden" name="selectedAction" id="select" hidden />
<tr>
<td>
<input type="submit" value="Update" data-action="#MyEnum.Value1" onclick="choice(this,event)"/>
</td>
........
<td>
<input type="submit" value="Update" data-action="#MyEnum.Value20" onclick="choice(this,event)"/>
</td>
</tr>
</form>
<script>
function choice(a,event){
event.preventDefault();
var result = $(a).data("action");
document.getElementById("select").value = result;
document.getElementById("Form").submit();
}
</script>
In the above code, I only wrote one hidden input and customized an attribute--data-action to accept #MyEnum.Valuexx's value, and then assigned this value to the hidden input.

Pass textbox variables to query Google Sheets

I'm designing a "SIMPLE" web app, I want to query the sheet using the user's response( captured in the html textbox) and then display the cells that match in the HTML page, but the issue is wiring the submit button to return the results
function doGet(e) {
return HtmlService
.createTemplateFromFile('frontend')
.evaluate()
.setSandboxMode(HtmlService.SandboxMode.NATIVE)
}
And in the html I have basically
<tr>
<td>Search name: </td>
<td><input type="text" name="Name" /></td>
</tr>
<input type="submit" onclick="google.script.run.do_it(??????)">
How do I send the textbox variables to Apps Script?
The input needs to be inside a form, and then you pass the form text input as this.parentNode (it's an object)
<form id="myForm">
<table>
<tr><td>First Name</td><td><input type="textbox" size="100" name="first" required> </td></tr>
<tr><td>Last Name</td><td><input type="textbox" size="100" name="last" required> </td></tr>
</table>
<br><br>
<input type="button" id="load" value="Start" onclick="inputForm(this.parentNode)"
style="padding:5px;color: #fff; border-color: white;"/>
</form>
inside the function you pass the form to, you can access the variables in the object like this
inputForm(e){
Logger.log(e.first);
Logger.log(e.last);
}
Does that give you enough to get started?

Laravel add row to table without refreshing page

I'm trying to add row to the table without refreshing page is it possible without using js? Basically I have a table and input in the modal my problem is that I need to refresh the page whenever I'm adding data to table which closes modal and data from the table has to be saved only when pressing save button in the modal. Maybe it is possible to do that using Laravel Controllers?
<table class="table" style="margin-top: 16px">
<tbody>
<tr>
<td class="table-text">
<div style="float: left">TASK NAME</div>
</td>
<td style="width: 10%">
<div style="float: end">DELETE</div>
</td>
</tr>
</tbody>
This is not possible without javascript.
Assuming you are using jquery, I would do something like this:
$('form').on('submit', function(e) {
e.preventDefault(); // Disable the sending of the form
var one = $('#one').val();
var two = $('#two').val();
$('#one').val('');
$('#two').val('');
$.ajax({
url: "/api/products/add",
method: 'post',
data: {
product: one,
price: two
},
success: function(){
appendToTable(one, two);
}
});
appendToTable(one, two); // The Success function in this ajax would never reach, because the url is not set. Thats because the function is called here.
});
function appendToTable(one, two) {
$('table').append(`
<tr>
<td>${one}</td>
<td>${two}</td>
</tr>
`);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="/api/products/add" method="post">
<input id="one" name="product" type="text" placeholder="product" required>
<input id="two" name="price" type="number" placeholder="price" required>
<button>Add</button>
</form>
<table>
<tr>
<th>Product</th>
<th>Price</th>
</tr>
<tr>
<td>PC</td>
<td>500</td>
</tr>
</table>
You disable the forms default behavior (submitting) and do the nessesarry work with js (or jquery). If the user hover disables js, the form submits as normal and sends the data.

How to know if my radio button is checked? AngularJS

guys I did a code for knowing if my checkbox is checked and works fine:
HTML:
<div ng-app>
<div ng-controller="UserController">
<table id="tblUsers" class="Table">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Last Name</th>
<th>Phone</th>
</tr>
<tr ng-repeat="user in users">
<td><input type="checkbox" ng-model="user.checked"/></td>
<td>{{user.name}}</td>
<td>{{user.lastName}}</td>
<td>{{user.phone}}</td>
</tr>
</table>
</div>
</div>
This is the Angularjs code:
function UserController($scope) {
$scope.users = [
{ checked: false, name: 'Jorge', lastName: 'Martinez', phone: 012345 },
{ checked: false, name: 'Juan', lastName: 'Perez', phone: 78964 }
];
$scope.updateUser = function () {
angular.forEach($scope.users, function (user) {
if (user.checked) {
user.name = $scope.nameUpdate;
user.lastName = $scope.lastNameUpdate;
user.phone = $scope.phoneUpdate;
}
});
};
}
The problem is when I change the checkbox for a radio button:
<td><input type="radio" ng-model="user.checked"/></td>
When I do this, this value "if(user.checked)" appears as "undefined".
Some one that knows how to fix this or how to know if the radio button is checked or not in the AngularJS controller.
see https://docs.angularjs.org/api/ng/input/input%5Bradio%5D
you'll want to have multiple radio buttons, each with it's own value to set some property to (although this is weird for a yes no you are better off with a checkbox, but if you had multiple values this is how radio buttons work)
<input type="radio" ng-model="user.checked" ng-value="true" />Yes
<input type="radio" ng-model="user.checked" ng-value="false" />No
when you have just one radio button, if it is not checked by default or you have no ng-value it will be undefined, but also having only one radio button, you could never unselect it.
You need to give the radio button a value.
<td><input type="radio" ng-model="user.checked" value="true"/></td>
<td><input type="radio" ng-model="user.checked" value="false"/></td>
Working Fiddle