Validating and submitting a web page composed of dynamic tabs containing each of them a form (submitting a set of nested forms with a single click)

See more:

forms

bootstrap

AngularJs

, +

I am working on project with ASP.NET MVC 5 (C #), AngularJS 1.6, HTML5, Bootstrap 3.3, and SQL Server 2014. I am facing a problem of validation and submitting of a web page composed of dynamic tabs containing each of them a form. I want to verify the validity of each form (contained in a tab), and then submit all the forms in one "Send" button click to be saved in the SQL Server database.

How can I do that? (I have an idea to put the set of forms in a list of forms, but I do not know how to do it (I saw that I could use the ng-form contained in form and use REST Web API).

I give you an example to fully understand my need and help me if possible by telling me the types of variables and the steps to follow for the front-end and back-end.

SupportDemande.cshtml :

<script src="~/Scripts/tether.min.js"></script>
<script src="~/Scripts/jquery-3.1.1.js" type="text/javascript"></script>
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/angular.min.js"></script>
<script src="~/Scripts/angular-animate.min.js"></script>
<script src="~/Scripts/angular-route.js"></script>
<script src="~/Scripts/angular-aria.min.js"></script>
<script src="~/Scripts/angular-messages.min.js"></script>
<script src="~/ScriptsJS/SupportDemande/SupportDemandeApp.js"></script>

<div ng-app="supportDemandeApp" ng-controller="supportDemandeCtrl" class="supportDemande" role="tabpanel" ng-cloak>
    <ul class="nav nav-tabs" role="tablist" tabindex="selectedIndex">
        <li class="active" role="presentation" ng-repeat="revue in revues" ng-click="selectRevue($index)" ng-class="{'active':selectedRevue == $index}">
            <a data-target="#revue" aria-controls="home" role="tab" data-toggle="revue">
                Revue {{revue.id}}
                <span ng-click="supprimerRevue($index)" ng-if="$index > 0" class="glyphicon glyphicon-remove"></span>
            </a>
        </li>
    </ul>
	
	<form class="tab-content" id="revueListe" name="revueListe" ng-model="revueListe" method="post" ng-submit="submitSupportDemande()" novalidate="">
        <div class="tab-pane fade in active" role="tabpanel" id="revue" ng-model="revue">
			<revue-tab ng-model="revueTab"></revue-tab>
		</div>
    </form>
	
	<br /> <br /> <br />
    <div class="form-group" style="text-align:center">
        <div class="col-lg-10 col-lg-offset-2">
            <button type="reset" class="btn btn-default" id="annuler" name="annuler">Cancel</button>
            <button type="submit" class="btn btn-primary" id="envoyer" name="envoyer" style="margin-left:10px" ng-disabled="!validSupportDemande()">Submit</button>
        </div>
    </div>
</div>

RevueTabTemplate.html :

<ng-form class="form-horizontal" id="revueForm" name="revueForm" ng-model="revueForm" method="post" ng-submit="submitRevueForm()" novalidate="">
    <br />
    <fieldset>
        <legend>Données de la revue</legend>

        <div style="padding:25px;margin-top:-30px;margin-bottom:-10px">
            <div class="form-group">
                <label for="nomDemandeur" class="col-lg-2 control-label">First Name</label>
                <div class="col-lg-10">
                    <input type="text" class="form-control" id="nomDemandeur" name="nomDemandeur" ng-model="nomDemandeur" required />
					<div class="help-block col-lg-9" ng-messages="revueForm.nomDemandeur.$error" ng-if="revueForm.nomDemandeur.$touched">
                        <span ng-message="required">Required</span>
                    </div>
                </div>
            </div>

            <div class="form-group">
                <label for="prenomDemandeur" class="col-lg-2 control-label">Last Name</label>
                <div class="col-lg-10">
                    <input type="text" class="form-control" id="prenomDemandeur" name="prenomDemandeur" ng-model="prenomDemandeur" required />
					<div class="help-block col-lg-9" ng-messages="revueForm.nomDemandeur.$error" ng-if="revueForm.nomDemandeur.$touched">
                        <span ng-message="required">Required</span>
                    </div>
                </div>
            </div>

            <div class="form-group" ng-class="{ 'has-error': revueForm.emailDemandeur.$touched && revueForm.emailDemandeur.$invalid }">
                <label for="emailDemandeur" class="col-lg-2 control-label">Email<span style="color:red"> *</span></label>
                <div class="col-lg-10">
                    <input type="email" class="form-control" id="emailDemandeur" name="emailDemandeur" ng-model="emailDemandeur" required />
                    <div class="help-block col-lg-9" ng-messages="revueForm.emailDemandeur.$error" ng-if="revueForm.emailDemandeur.$touched">
                        <span ng-message="required">Required</span>
                        <span ng-message="email">Invalid Email</span>
                    </div>
                </div>
            </div>
		</div>
	</fieldset>
	<br />
    <div class="col-lg-10 col-lg-offset-2">
        <button class="btn btn-info" ng-click="ajouterRevue()" ng-disabled="!validSupportDemande()">Add a revue</button>
        <button class="remove btn btn-danger" style="margin-left:10px" ng-click="supprimerRevue($index)" ng-disabled="$index > 0"><!--ng-if="$last"-->Delete this revue</button>
    </div>
</ng-form>

SupportDemandeApp.js :

///<reference path="../Scripts/angular.min.js" />
///<reference path="../Scripts/angular-route.min.js" />

var supportDemandeApp = angular.module('supportDemandeApp', ['ngMessages']);

supportDemandeApp.directive('revueTab',
    function () {
        return {
            restrict: 'EA',
            templateUrl: '/ScriptsJS/SupportDemande/RevueTabTemplate.html'
        }
    }
);

supportDemandeApp.controller('supportDemandeCtrl', ['$scope', '$filter', supportDemandeCtrl]);

function supportDemandeCtrl($scope, $filter) {
	
	//I'm using this function because in my actual form, I can not have all required fields filled in because I process several validation rules, and I use ng-if and ng-show to make appear or disappear some required fields. In brief, I use it to force validation of the form so that all the fields are valid (even if they are not filled).
	$scope.validRevueForm = function () {
        if ($scope.nomDemandeur && 
            $scope.prenomDemandeur &&
            $scope.emailDemandeur) {
                $scope.revueForm.$setValidity('required', true);
                return true;
        }
        else {
            $scope.revueForm.$setValidity('required', false);
            return false;
        }
        
    };

    //Submit Revue Form
    $scope.submitRevueForm = function () {
        if ($scope.validRevueForm() === true) {
            return true;
        }
    };

    //Submit List Revues Form
    $scope.submitSupportDemande = function () {
        if ($scope.submitRevueForm() === true) {
            alert('Support de demande envoyé avec succès');
            return true;
        }
    };
	
	
	//Tabs 'Revues'
    $scope.revues = [{
        id: 1,
        content: $scope.revue
    }]

    $scope.counter = 1;
    /** Function to add a new tab **/
    $scope.ajouterRevue = function () {
        $scope.counter++;
        $scope.revues.push({ id: $scope.counter, content: $scope.revue });
        $scope.selectedTab = $scope.revues.length - 1; //set the newly added tab active. 
    }

    /** Function to delete a tab **/
    $scope.supprimerRevue = function (index) {
        if ($scope.revues.length > 0) {
            $scope.revues.splice(index, 1); //remove the object from the array based on index
            $scope.counter--;
        }
    }

    $scope.selectedTab = 1; //set selected tab to the 1st by default.

    /** Function to set selectedTab **/
    $scope.selectTab = function (index) {
        $scope.selectedTab = index;
    }
}

SupportDemande.cs :

public class SupportDemande
{
    public List<Revue> GetData()
    {
        try
        {
            List<Revue> revues = new List<Revue>();
            for (int i = 0; i < 1; i++)
            {
                Revue revue = new Revue();
                revue.RevueID = i;
                //revue.RevueContent = "informations sur la revue " + i;
                revues.Add(revue);
            }
            return revues;
        }
        catch (Exception)
        {
            throw new NotImplementedException();
        }
    }

}

Revue.cs :

public class Revue
{
    public int RevueID { get; set; }
    public String Nom { get; set; }
    public String Prenom { get; set; }
    public String Email { get; set; }
}

SupportController.cs :

[Authorize]
[HandleError]
[RoutePrefix("Supports")]
public class SupportsController : Controller
{
    public ActionResult SupportDemande()
    {
        return View("SupportDemande");
    }

    //GET: /Supports/
    public JsonResult RevueData()
    {
        BEMF_REVUES.Models.SupportDemande supportDemande = new SupportDemande();
        var myList = supportDemande.GetData();
        return Json(myList, JsonRequestBehavior.AllowGet);
    }

What I have tried:

ng-form in form and template html