Create a simple AngularJS form from dynamic Json data with validation


We use ng-form when there is a need to nest a form within another form. The normal HTML <form> tag doesn’t allow us to nest our forms same as ASP.Net forms which means that the outer form is valid when all of the child forms are valid, as well while dynamically generating forms. Since we cannot dynamically generate the name attribute of inputs, We need to wrap each set of repeated inputs in an ng-form directive and nest these in another form. now if you want to dynamically generate a form based on a JSON data source. here, I’m going to use  ng-repeat to create input fields dynamically and read validations for each one from Json data set.

start your app.js file with:

angular.module('myApp', [])
.controller('FormController',function($scope){
$scope.fields=[
{placeholder: 'Username', isRequired: true},
{placeholder: 'Password', isRequired: true},
{placeholder: 'Email (optional)', isRequired: false}
];
$scope.submitForm=function(){
alert("submit has been successful");
};
});

 

and then download index.html file.

Ramin Ahmadi
I am a full-stack front end developer with over 5 years experience in web design and development. I have worked with a wide variety of environments and languages including Angular, TypeScript, NodeJS, Restful API, Microservices, Atomic design, JQuery, Material design, Progressive Web Apps, DevOps, and many Azure tools. I make it a goal to automate myself out of routine tasks in my daily work. My motto is, ‘write human readable code, lean and clean’.

Comments 3

Your email address will not be published. Required fields are marked *

Create a simple AngularJS form from dynamic Json data with validation

log in

Captcha!

reset password

Back to
log in
Choose A Format
Trivia quiz
Series of questions with right and wrong answers that intends to check knowledge
Poll
Voting to make decisions or determine opinions
List
The Classic Internet Listicles
Image
Photo or GIF
Gif
GIF format