We Keep Coding

Read post data in angular 2

I am new to web development maybe the problem I am trying to solve is a very basic one but I have googled a lot for a solution couldn't find one.
I have two web pages one and two
The below is one.html
<form id="requestForm" #requestForm ngNoForm action="{{requestUrl}}" method="POST">
<div *ngIf="requestmodel">
<button class="btn-flat waves-effect waves-light transparent regNrmS2BN" type="submit" id="submitForm" style="color: transparent; background-color: transparent;">Pay</button>
<input type="hidden" name="name" [ngModel]="requestmodel.name" />
</div>
</form>
This above form gets automatically posted to the next web page two.html and below is the code for that which is written in ComponentOne
ngOnInit(): void {
this.requestmodel = this.requestService.getRequest();
this.requestUrl = 'http://localhost:3000/two';
this.submitMe();
}
submitMe() {
let me = this;
if ($('#submitForm') && $('#submitForm')[0])
$('#submitForm')[0].click();
else
setTimeout(function () { me.submitMe(); }, 100);
}
The problem is how do I read the form data in ComponentTwo and the requirement is I should not use Service for this else there wouldn't be any problem at all.
So how can I accomplish this without a service class?

You probably will have to use EventEmitter and #Output to access to this event outside. Then use it in another html file as event and pass variables to your typescript file as $event. I hope I got your question right and didn't mislead you

Angular 1.X creating a form with value that is incremented/decreased by button

Using angular to provide users with a form for which they can enter values, but want to provide +/- buttons to allow them to use it if desired (tablets etc)
My knowledge of angular is still being expanded and am unsure how to complete the task, I've currently setup validation but not sure how to tackle this one. Should I put a default value into the input, e.g. 0 and called {{count}} that is increased and decreased? or try to affect the ng-model directly.
Here it is currently, also nothing happens when the buttons are pressed.
Basically the form collects information, which is then sent to the calculator service which runs some numbers.
HTML
<div class="form-block">
<label for="totalStaff">Number of Staff</label>
<button ng-click="staff.staffTotal--">-</button>
<input class="form-control max-width" type="number" id="totalStaff" name="totalStaff" placeholder="Total Staff"
ng-model="staff.staffTotal"
ng-blur="myform.totalStaff.$touched=true"
ng-required="true"
placeholder="{{myform.totalStaff.$touched && myform.totalStaff.$error.required ? 'Please Enter a value' : 'Induction Courses'}}" ng-class="{'input-error': myform.totalStaff.$touched && myform.totalStaff.$error.required}" />
<button ng-click="staff.staffTotal++">+</button>
</div>
Controller
(function() {
"use strict";
var app = angular.module("app");
app.controller('StaffDetailCtrl', ["$scope", "$location", "CalculatorService", function($scope, $location, calculatorService) {
$scope.clicked = function() {
calculatorService.setStaff($scope.staff);
$location.path('/additionalfeatures');
};
$scope.staff = angular.copy(calculatorService.getStaff());
}]);
}());

Here is a plunker for you with working demo.
The best way to share data across your app is factories. Also please read about watchers
Hope it helps.

White screen on form submit - google web app [duplicate]

At this stage I'm mostly used to backend Javascript and server side Java, so my HTML is not as savvy as it needs to be.
I've built several applications that require user input with Apps script, but I was using the now deprecated UI service, as I'm not a designer and this provided an easy way to design simple pages to pass data back and forth. With the UI service having been deprecated for some time, I'm begging the arduous task of migrating these services to the HTML service, and I'm noticing some difference in behavior.
For example, when submitting a form, the entire page refreshes to a blank page, and I can't seem to prevent that. The UI service would remain static for information re-entry, and I can't find a working method to get the HTML service to either stop refreshing or reload the form.
Simple code to reproduce my issue:
function doGet() {
return HtmlService.createHtmlOutputFromFile('test')
.setSandboxMode(HtmlService.SandboxMode.IFRAME);
}
function logValues(value){
Logger.log('Something worked....');
}
With the index file being:
<form>
<input type="submit" value="Book Meeting" onclick="google.script.run
.logValues()">
</form>
Some things I've tried:
1) Adding a callback to the 'doGet' function, to attempt to get the page to load again.
2) Adding a whole new function to try and call a NEW HTML page.
The issue here is my poor understanding of the HTML service, but is there a simple way for me to just clear the form for re-submission, or alternatively just reload the page? None of the other questions I've found on SO adequately answer this question in a way I can understand.

Since you're technically submitting your form by clicking the submit button, then that creates the page refresh. You need to cancel the submit event with the preventDefault function, which "Cancels the event if it is cancelable, without stopping further propagation of the event."
See the docs here: https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault
So maybe you can try something along these lines (straight from the docs):
function stopDefAction(evt) {
evt.preventDefault();
}
document.getElementById('my-checkbox').addEventListener('click', stopDefAction, false);
Another option is to remove the form/input elements and simply use a button element instead, which doesn't trigger a page refresh on click.

It's an interesting ride switching old UI services across, I just did that with one of my applications and it has really improved the readability of the code. I posted a copy of a basic version of what I was doing in another question
Once you get your head around it all it becomes a lot simpler. This is a really basic example of using multiple HTML files similar to your example using the HTMLService when submitting forms (you can pass in parameters instead)
Code.gs
function doGet() {
return HtmlService.createTemplateFromFile('Main')
.evaluate()
.setSandboxMode(HtmlService.SandboxMode.NATIVE);
}
function onLogin(form) {
if (form.username == "fuzzyjulz") {
var template = HtmlService.createTemplateFromFile('Response');
//Setup any variables that should be used in the page
template.firstName = "Fuzzy";
template.username = form.username;
return template.evaluate()
.setSandboxMode(HtmlService.SandboxMode.NATIVE)
.getContent();
} else {
throw "You could not be found in the database please try again.";
}
}
function include(filename) {
return HtmlService.createTemplateFromFile(filename)
.evaluate()
.setSandboxMode(HtmlService.SandboxMode.IFRAME)
.getContent();
}
Main.html
<?!= include('CSS'); ?>
<script>
function loadPage(htmlOut) {
var div = document.getElementById('content');
div.innerHTML = htmlOut;
document.getElementById('errors').innerHTML = "";
}
function onFailure(error) {
var errors = document.getElementById('errors');
errors.innerHTML = error.message;
}
</script>
<div id="errors"></div>
<div id="content">
<?!= include('Login'); ?>
</div>
CSS.html
<style>
p b {
width: 100px;
display: inline-block;
}
</style>
Login.html
<script>
function onLoginFailure(error) {
var loginBtn = document.getElementById('loginBtn');
loginBtn.disabled = false;
loginBtn.value = 'Login';
onFailure(error);
}
</script>
<div class="loginPanel">
<form>
<p>
<b>Username: </b>
<input type="text" name="username"/>
</p>
<input type="button" id="loginBtn" value="Login" onclick="this.disabled = true; this.value = 'Loading...';google.script.run
.withSuccessHandler(loadPage)
.withFailureHandler(onLoginFailure)
.onLogin(this.parentNode)"/>
</form>
</div>
Response.html
<div class="text">
Hi <?= firstName ?>,<br/>
Thanks for logging in as <?= username ?>
</div>

How to clear a form in an ng-include

I have an html template with a reusable modal that gets ng-included like this:
myPartial.html
... SOME HTML ...
<ng-include src="'form.html'"></ng-include>
modal.html
...
<form>
<input ng-model="comment.value" />
<button type="submit" ng-click="save(comment.value)" />
</form>
...
What is the best way to clear the form -- particularly from the controller if possible. I'd like to clear the form from my save() method after a successful http call, but since ng-include creates it's own scope, i'm not sure how to do this.
Here's a plunker to show my problem: http://plnkr.co/edit/zkxZOZr3f7sHJZfCiuoT?p=preview
If you take the contents of form.html and put them directly into index.html it works just fine.

You almost got it. Just initialize the comment instance in your controller and update the correct value in save. I believe the behaviour your experiencing is called "prototypal inheritance" and you can read about it at Understanding scopes. This is not exclusive to AngularJS btw, but can be found in regular JavaScript as well.
angular.module('app', []).controller('appcontroller', function($scope) {
// create comment
$scope.comment = { value: 'test' };
$scope.save = function(value) {
console.log('in here ');
// and update comment.value, not comment.
$scope.comment.value = null;
};
});
I updated your plunker.

Which gets executed first? onclick or ng-click

Now, I have a button and I have a validation process taking place in its click [onclick]. I have a web service call and other processes if the validation is successful, which I have in the ng-click. I doubt validation is not taking place.
My Page:
<script>
validate(){
// my validation code goes here...
}
</script>
<input type="button" id="btnLogin" title="Login" value="Login" onclick="validate();" ng-click="login_authentication();"/>
My Controller:
$scope.login_authentication = function() {
// My login code goes here....
}

Ideally you shouldn't be using onclick at all in angular if you can avoid it. Run validate() in your ng-click and then run login_authentication() if successful. Alternatively use angular's ng-form style validation for your inputs.

You should avoid using onclick in angularjs.
For answer of your question onClick will be called first
I tried this code which tells that that onClick will be called first.
<div ng-controller="ControllerZero">
<button ng-click="angularNgClick()" onclick="jsClick()">Click</button>
</div>
function ControllerZero($scope) {
$scope.angularNgClick = function() {
alert('Angular NG Click');
};
}
var jsClick = function() {
alert('js on Click');
};
DEMO