We Keep Coding

How do you change form state to dirty on button press within a form in Angular 4?

I have a form in Angular with a form array where you can add or delete data. Currently, during marking a form as dirty, it does not include button press for deletion. Is there a way to do this? Thank you!

Try like this:
this.Form.get('control').markAsDirty();
this.Form.get('control').updateValueAndValidity();
where:
Form : FormGroup and control (make it dirty) is control in Form

Why isn't my JS pulling the value from the form properly?

HTML in question is pretty simple:
<form>
<input type="text" name="locSearch" id="locSearch" />
<button id="locSearchBtn"><i class="fa fa-search" id="search-icon"></i></button>
</form>
js:
$(document).ready(function() {
getsWeather('seattle, wa', 'f');
$("#locSearchBtn").click(function() {
getsWeather(document.getElementById('locSearch').value, 'f');
});
When I submit the form (either by pressing enter or by clicking the submit icon, the page reloads but with the default setting (i.e with 'Seattle, wa as the default argument for the getsWeather function). I need it to pull whatever is in the input box and use that as the argument in the getsWeather function but that currently isn't working.
Any ideas? Let me know if you need more of the code to understand it

If you want to modify the page, you need to prevent the form from being submitted when you click the button. Two ways to do that:
Add return false to the end of your click handler for the button. This will prevent form submission (if JavaScript is enabled on the client).
Add type="button" to the button so it's not a submit button anymore.
Ideally, you'd combine #1 with handling a form submission if the client doesn't have JavaScript enabled, to handle the small number of people who surf with JavaScript disabled via the form submission while handling JavaScript-enabled clients with the in-page update.

onBlur on editable-form (Angularjs)

Is there a directive onblur for editable-form? I can't seem to find one. angular has this ngTouch but it only validates a single input. What I really want is to know if the user loses focus on the form itself.
my code is something like this [editable-form][1]
but when the user clicks on the different form the editable form will trigger the editableForm.$cancel() method.
http://jsfiddle.net/NfPcH/81/

I've got the solution, you only need to add the tag blur='cancel' on <form editable-form name="editableForm" onaftersave="saveUser()" blur="cancel">

How to add a value to a textbox using a submit?

I have two submit buttons namely "Approve" and "Reject". Both of them go to one controller file so I set the controller file on the action tag of the form.
What I want is that when I click Approve, it sets the value of the hidden field named 'Decision' with 'Approved' and when I click 'Reject', the value of the hidden field will be 'Rejected' then the form will continue to submit to the designated controller.
However, the form continues to the controller but the decision field is empty.
Also, when I tried to put an 'alert' on the javascript function, it is not showing everytime I click the submit buttons eventhough I used the onClick tag.
Can someone suggest a working code for this? Thank you. :)

So I believe form actions have precedence over javascript and other stuff like animations.
To answer your question: you can make the submit buttons just normal buttons like so:
<input id='accept-button' type='button' name='accept' value='Accept' />
and add an event listener to it that changes the value of the hidden field when clicked then submits the form:
document.getElementById('accept-button').addEventListener("click", function () {
var hiddenid = document.getElementById('hidden');
var formid = document.getElementById('form-id');
hiddenid.value = 'Accepted';
formid.submit();
});
After a quick search I found a better solution from this question's accepted answer. It uses jquery though.

Change an input value and submit the form on keypress (not just enter to send)

I'm really confused. I want to make a sort of a hotkey that changes the value of a hidden input field and submits the form. How can I do that? I've read numerous blogs and tutorials but all assume that I just want to submit the filled form after pressing enter. While I just don't understand how the very "structure" of a form acts in javascript.
Should I fill the hidden input like this:
document.getElementById('foo').value='bar'
I don't think there's even a way to see if its value was changed so I'm not sure.
And then, how do I submit the form, if I have:
<form name='myform' method='post' action='url.html'>
I tried document.myform.submit() and document.myform.form.submit(), and I've also tried giving the form an id and using document.getElementById('myformid').submit() but none of these work! I usually get the error TypeError: 'undefined' is not an object.
I'm new to javascript, I'm used to working with python but it has a completely different philosophy, and maybe that's the source of my confusion. I'd very appreciate some explanation, not just a code snippet.
Thanks!

You can always check the hidden field with the Development Tools of your Browser - just press F12 and you will see it. Go to the DOM list (within the Development Tool) and then you see the actual value of that field.
To submit a form via JavaScript normally document.name.submit() is enough. Another option is that you use e.g. jQuery to submit a form via AJAX (with the help of jQuery.serialize)

If you want to use document.getElementById('myformid').submit() you have to give an ID to your form like that :
<form name='myform' id="myform" method='post' action='url.html'>
It's the same thing about your hidden field.
document.getElementById('foo').value='bar' assume you have an hidden like that :
<input type="hidden" name="foo" id="foo" />

You can try the following approach
<form name='myform' method='post' action='url.html'>
// your fields here
// then use a input type button to have a button and define an on click event
</form>
<script type = "text/javscript">
use the event in your script
//change your hidden field value here and
// submit the form by
myform.submit();
</script>

You can use ajax or jquery as there is a function named on key up it means after pressing a key on the last field which ever you choose as you leave the key on keyboard it will submit the forms.
check this okay http://www.w3schools.com/php/php_ajax_livesearch.asp