<!DOCTYPE html>
<
html
>
<
head
>
<
script
src
=
</
script
>
<
link
rel
=
"stylesheet"
href
=
<
style
>
body {
background-color: #f0f8ff;
}
.form-container {
width: 600px;
margin: 0 auto;
padding: 20px;
border: 1px solid #007BFF;
background-color: #fff;
font-family: Arial, sans-serif;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
h1 {
color: #008000;
}
.form-step {
border: 1px solid #007BFF;
margin-bottom: 20px;
background-color: #f0f8ff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
display: none;
}
.active-step {
display: block;
}
.form-button {
background-color: #007BFF;
color: #fff;
border: none;
padding: 10px 20px;
cursor: pointer;
font-size: 16px;
border-radius: 5px;
transition: background-color 0.3s;
}
.form-button:hover {
background-color: #0056b3;
}
.form-button[disabled] {
background-color: #0056b3;
cursor: not-allowed;
}
.back-button,
.forward-button {
background-color: #0056b3;
color: #fff;
border: none;
padding: 10px 20px;
cursor: pointer;
font-size: 16px;
border-radius: 5px;
transition: background-color 0.3s;
}
.back-button:hover,
.forward-button:hover {
background-color: #0056b3;
}
table {
width: 100%;
border: 1px solid #ddd;
border-collapse: collapse;
}
th,
td {
padding: 10px;
text-align: left;
border: 1px solid #ddd;
}
</
style
>
</
head
>
<
body
ng-app
=
"dynamicFormApp"
ng-controller
=
"DynamicFormController"
>
<
div
class
=
"form-container"
>
<
h1
>GeeksforGeeks</
h1
>
<
h3
>
Approach 2: Dynamic Form Fields Using ng-show
</
h3
>
<
form
name
=
"dynamicForm"
ng-submit
=
"submitForm()"
>
<
div
class
=
"form-step"
ng-class
=
"{ 'active-step': currentStep === 1 }"
>
<
h3
>Step 1: Personal Information</
h3
>
<
div
>
<
label
for
=
"firstName"
>First Name:</
label
>
<
input
type
=
"text"
id
=
"firstName"
name
=
"firstName"
ng-model
=
"formData.firstName"
required>
</
div
>
<
div
>
<
label
for
=
"lastName"
>Last Name:</
label
>
<
input
type
=
"text"
id
=
"lastName"
name
=
"lastName"
ng-model
=
"formData.lastName"
required>
</
div
>
<
button
class
=
"form-button"
ng-click
=
"nextStep(2)"
>Next
</
button
>
</
div
>
<
div
class
=
"form-step"
ng-class
=
"{ 'active-step': currentStep === 2 }"
>
<
h3
>Step 2: Contact Information</
h3
>
<
div
>
<
label
for
=
"email"
>Email:</
label
>
<
input
type
=
"email"
id
=
"email"
name
=
"email"
ng-model
=
"formData.email"
required>
</
div
>
<
div
>
<
label
for
=
"phone"
>Phone:</
label
>
<
input
type
=
"tel"
id
=
"phone"
name
=
"phone"
ng-model
=
"formData.phone"
required>
</
div
>
<
button
class
=
"form-button back-button"
ng-click
=
"prevStep(1)"
>Back
</
button
>
<
button
class
=
"form-button forward-button"
ng-click
=
"nextStep(3)"
>Next
</
button
>
</
div
>
<
div
class
=
"form-step"
ng-class
=
"{ 'active-step': currentStep === 3 }"
>
<
h3
>Step 3: Additional Information</
h3
>
<
div
>
<
label
for
=
"address"
>Address:</
label
>
<
input
type
=
"text"
id
=
"address"
name
=
"address"
ng-model
=
"formData.address"
required>
</
div
>
<
button
class
=
"form-button back-button"
ng-click
=
"prevStep(2)"
>Back
</
button
>
<
button
class
=
"form-button"
ng-click
=
"submitForm()"
ng-disabled
=
"currentStep !== 3"
>Submit
</
button
>
</
div
>
</
form
>
<
div
ng-show
=
"showSubmitted"
>
<
h3
>Form Submitted!</
h3
>
<
table
>
<
tr
>
<
th
>First Name</
th
>
<
th
>Last Name</
th
>
<
th
>Email</
th
>
<
th
>Phone</
th
>
<
th
>Address</
th
>
</
tr
>
<
tr
ng-repeat
=
"user in userData"
>
<
td
>{{ user.firstName }}</
td
>
<
td
>{{ user.lastName }}</
td
>
<
td
>{{ user.email }}</
td
>
<
td
>{{ user.phone }}</
td
>
<
td
>{{ user.address }}</
td
>
</
tr
>
</
table
>
</
div
>
</
div
>
<
script
>
angular.module('dynamicFormApp', [])
.controller('DynamicFormController', function ($scope) {
$scope.currentStep = 1;
$scope.showSubmitted = false;
$scope.formData = {};
$scope.userData = [];
$scope.nextStep = function (step) {
$scope.currentStep = step;
};
$scope.prevStep = function (step) {
$scope.currentStep = step;
};
$scope.submitForm = function () {
$scope.userData.push(angular.copy($scope.formData));
$scope.formData = {};
$scope.currentStep = 1;
$scope.showSubmitted = true;
};
});
</
script
>
</
body
>
</
html
>