AngularJS Tutorial #14 - ng-submit directive

Yo ninjas, in this AngularJS tutorial, I'll go through how we can handle form submissions with the ng-submit directive. We'll use ng-submit to allow the user to enter a new ninja to the data list, and use our controller to handle the event itself.

Hey gang, in this AngularJS tutorial, I'll be introducing you to filters and how we can use them to change the way our data is displayed to a user. Filters can be used in conjunction with ng-repeat, or directly on the expression itself. We use Angular filters to do things like ordering a list of items alphabetically, or by type, or to display numbers as a currency.

----- COURSE LINKS:

---------------------------------------------------------------------------------------------
You can find more front-end development tutorials on CSS, HTML, JavaScript, jQuery, WordPress & more on the channel homepage...

========== JavaScript for Beginners Playlist ==========

============ CSS for Beginners Playlist =============

============== The Net Ninja =====================

================== Social Links ==================

[phumlaninxumalo]

hey net ninja, first of all I would like to appreciate your tutorials here they really shine the light. I've been doing some code with the help of your tutorials but in a different way and so in my code I created a form and introduced a submit button to submit the details after filling the form. What I wanted to happen is that when I submit the input fields would then clear out so that I can put another information, but it doesn't clear out yet I've included the scope that is responsible for clearing out input fields, under my controller. So now I'm kind of confused what I should do. Know that my form have some radio inputs.

[ViacheslavLopatynskyi]

Hi, good video. think instead of cleaning each field after addNinja we can call method reset() of form?

[RavenIsil]

Hey Net Ninja, do you have plans in making a tutorial playlist about a more backend-ish subject like maybe express.js or stuff like that? Great work with this angular playlist, I don't miss a single one!

[EdDaWord]

Great Tutorials!
Is there a reason you don't clear the `$scope.newninja` with `=[]` instead of doing each individual thing? Is it just best practice? Is it a performance thing?

[BennyPowers]

Heya. Q about how you're zeroing out the form. I noticed you repeated the process three times, setting the data to null for each field. Is there a DRYer way to do this?

[Jacob]

Hey Net Ninja, why do you manually set the 3 properties within newninja back to blank instead of just saying $scope.newninja = {};? You do the same thing in your addNinja function, rather than simply pushing in the whole newninja object into your array. Is there a reason for this, or was it just a slip up?

[prashanthvamanan]

Hey Shaun. Was just wondering whether the same could be done by passing the ninja object to the ng-submit and receiving it in the controller via a temporary object and then pushing it into the array as


let tempObj = {};


//Say ninja is the parameter to the addNinja function.


tempObj.name = ninja.name;
tempObj.belt = ninja.belt;
tempObj.rate = ninja.rate;
$scope.ninjas.push(tempObj);


Will the above code work? Because when I tried the same it didn't

[jairabu]

Hello! Why not use a ng-click with a normal button instead of submit?

[crptc]

Just wonder that how could we bind ninja.name with ng-model without creating ninja first, like if we type ninja.name = "foo" in javascript it will cause reference error... thanks!

[leorabrody]

If I add a rate that has a comma in it, i.e. '1, 000', the number won't save in the form. How could you adjust so that the form accepts '1000' and '1, 000' and converts them into currencies?

[zxrlwpe]

hi people! may you explain how to add jpg or png file into object when i insert <input type="file">. which method could i use?

[wooly_g]

when using ng-submit how do you permanently store the information submitted onto the object or the JSON. With the video showing storing but erasing on refresh. Thanks!!! Extremely helpful series

[劉浩霆-cj]

how do u close a tag with a shortcut key?

[HassanMalikTW]

you are using $scope for your arrays and objects...

like this one:

$scope.ninjas = [{}, {}, {}]

i use the word "this", like this one:

this.ninjas = [{}, {}, {}]

when I use THIS word... my code works...
when i use $scope... it doesn't

am i missing anything?

[warchild]

Hello! First of all thanks for tutorials! I just have one question. When we add new ninjas they are getting deleted when we refresh page, and my question is that how can we save them? I mean whenever we add new ninja and refresh page, I want them to appear here and delete after that whenever i want. Is it done with databases?

P.S sorry for my english, i hope you will get what i am saying

[andriykuts]

Can we add newninja entirely, like this :

[arunks]

why are you putting newNinja in ng-model why not simply name (not newNinja.name)

[alanpallath]

Just a random thought. I think we can implement the same functionalities by using ng-click. Any other special uses for this directive?

[rohitkumarshrivastava]

Pressing tab key in the input box to got to the next input box is throwing me the following error:

Uncaught TypeError: Cannot read properties of undefined (reading 'endValue')
at HTMLBodyElement.KeyUp