I am using directive to add HTML div dynamically on the click of button.
How can I bind the model to controller scope object?
How can populate the scope object with enter data in dynamically added div?
How can I get list of object while click on save button.
Please find the code that I tried to add html div dynamically, but doesn't have any idea how to bind the entered data to scope object.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script type="text/javascript">
function FlatMember() {
this.firstName = '';
this.lastName = '';
this.emailId = '';
this.panNo = '';
this.phoneNo = '';
this.profileImage = ''
}
angular.module('myApp', []);
angular.module('myApp').controller('FlatMemberController', function ($scope) {
$scope.flatMembers = [];
$scope.addFlatMember = function() {
$scope.flatMembers.push(new FlatMember());
};
$scope.SaveFlatMember = function(){
console.log($scope.flatMembers);
}
});
angular.module('myApp').directive('memberInformation', function(){
return {
restrict: 'A',
template: '<div style="margin-top: 50px;">\
<div>\
<p>\
<label>First Name </label>\
<input type="text" id="firstName" /> \
<label>Last Name </label> <input type="text" id="lastName" />\
</p>\
<p>\
<label>Email </label> <input type="email" id="emailId"/>\
</p>\
<p>\
<label>PAN Number </label> <input type="text" id="panNo" data-ng-minlength="10"/>\
</p>\
<p>\
<label>Mobile </label> <input type="text" data-ng-minlength="10" id="phoneNo" />\
</p>\
</div> </div>',
replace: true,
transclude: false,
scope: {
memberInfo: '=memberInformation'
}
};
});
</script>
</head>
<body ng-app="myApp">
<div ng-controller="FlatMemberController">
<button ng-click="addFlatMember()">Add new Member</button>
<div ng-repeat="flatMember in flatMembers"member-information="flatMember"></div>
<button ng-click="SaveFlatMember()">Save Member</button>
</div>
</body>
</html>
Your template is missing the ng-model bindings:
angular.module('myApp').directive('memberInformation', function(){
return {
restrict: 'A',
template: '<div style="margin-top: 50px;">\
<div>\
<p>\
<label>First Name </label>\
<input type="text" id="firstName" name="firstName" ng-model="memberInfo.firstName" /> \
<label>Last Name </label> <input type="text" id="lastName" name="lastName" ng-model="memberInfo.lastName" />\
</p>\
<p>\
<label>Email </label> <input type="email" id="emailId" name="emailId" ng-model="memberInfo.emailId" />\
</p>\
<p>\
<label>PAN Number </label> <input type="text" id="panNo" data-ng-minlength="10" name="panNo" ng-model="memberInfo.panNo" />\
</p>\
<p>\
<label>Mobile </label> <input type="text" data-ng-minlength="10" id="phoneNo" name="phoneNo" ng-model="memberInfo.phoneNo" />\
</p>\
</div> </div>',
replace: true,
transclude: false,
scope: {
memberInfo: '=memberInformation'
}
};
});
Related
I have a ngForm for singup page. I have tried passing the data to the .ts file but failed to print them on console.
Here's my code:
<div class="column" style="padding: 7.5%">
<form #instituteForm="ngForm" (ngSubmit)="instituteLogin(instituteForm)">
<div class="form-group">
<label> Full Name </label>
<input
type="text"
ng-maxlength="10"
hint="Full Name"
name="patient"
id="name"
class="form-control"
[(ngModel)]="institute.patient">
<label> Phone Number </label>
<input
type="number"
hint="phone"
name="phoneno"
id="phone"
maxlength="10"
minlength="10"
class="form-control"
[(ngModel)]="institute.phoneno">
<label> Aadhar Number </label>
<input
type="number"
hint="aadhar"
id="aadhar"
name="aadhar"
maxlength="16"
minlength="16"
class="form-control"
[(ngModel)]="institute.aadhar">
<br><br>
</div>
<button id="signup" class="btn btn-primary" type="submit">Signup</button>
</form>
</div>
institute = {
patient: '',
phoneno: '',
aadhar: ''
};
instituteLogin(instForm: NgForm) {
console.log("Entered new patient");
console.log(instForm.value);
}
You have not added the FormsModule in app.module.ts.
import { FormsModule } from '#angular/forms';
#NgModule({
imports: [
// Other imports
FormsModule
]
})
Working demo : https://stackblitz.com/edit/angular-ybbamr
In this case it should be like this:
instituteLogin(): void{
console.log("Entered new patient");
console.log(this.institute);
}
Well, I think you should use FormControlName instead of ngModel.
html:
<div class="column" style="padding: 7.5%" >
<form [formGroup]="institute" #instituteForm (ngSubmit)="instituteLogin()">
<div class="form-group">
<label> Full Name </label>
<input type="text" ng-maxlength="10" hint="Full Name" id="name" class="form-
control" formControlName="patient">
<label> Phone Number </label>
<input type="number" hint="phone" id="phone" maxlength="10" minlength="10"
class="form-control" formControlName="phoneno">
<label> Aadhar Number </label>
<input type="number" hint="aadhar" id="aadhar" maxlength="16" minlength="16"
class="form-control" formControlName="aadhar">
<br><br>
<button id="signup" class="btn btn-primary"
routerLink="../../home/dashboard">Signup</button>
</div> </form>
</div>
ts:
institute:FormGroup;
instituteLogin(){
console.log("Entered new patient");
console.log(this.institute.value);
}
constructor(private formBuilder:FormBuilder) { }
ngOnInit() {
this.institute =this.formBuilder.group( {
patient: new FormControl(),
phoneno:new FormControl(),
aadhar:new FormControl()
});
}
I'm just getting started with web design and it may be a silly question. I haven't added JavaScript code yet, but what I need is that all the options/forms require input before the query is submitted, otherwise to get highlighted in red. Any help would be great.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<form>
<label for="value1">Example1</label>
<select id="value1" required>
<option value="">--Select an option--</option>
<option value="opt1">1</option>
<option value="opt2">2</option>
</select>
<label for="value2">Example2</label>
<select id="value2" required>
<option value="">--Select an option--</option>
<option value="Normal">Normal</option>
<option value="Superior">Superior</option>
</select>
</form>
<label for="date1">date1</label>
<input type="date" id="firstDate" required>
<label for="date2">date2</label>
<input type="date" id="secondDate" required>
<label for="value3">example3</label>
<input type="number" id="exampleNumber" required>
<button type="button" id="button1" required>button1</button>
</body>
</html>
Are you expecting like this:
The below given code can be used to validate each and each field more specifically.
Also i have added :focus selector in order to highlight if the input data is not given.If the input data is not given it will be highlighted in red.
function validate(){
if(document.rform.fname.value==""){
alert("Enter Your First Name");
document.rform.fname.focus();
return false;
}
if(document.rform.lname.value==""){
alert("Enter Your Last Name");
document.rform.lname.focus();
return false;
}
if(document.rform.address.value==""){
alert("Enter Your address");
document.rform.address.focus();
return false;
}
var val = document.getElementById('mobilenumber').value;
if (val.length < 10 || val.length > 12 ) {
alert("Enter a valid phone number")
return false; // keep form from submitting
}
if(document.rform.city.value==""){
alert("Enter your city name");
document.rform.city.focus();
return false;
}
if(document.rform.pincode.value==""){
alert("Enter a valid pin number");
document.rform.pincode.focus();
return false;
}
if(document.rform.email.value==""){
alert("Enter your Mail Id");
document.rform.email.focus();
return false;
}
var mailformat = /^\w+([\.-]?\w+)*#\w+([\.-]?\w+)*(\.\w{2,3})+$/;
if(document.rform.email.value.match(mailformat))
{
document.rform.email.focus();
return true;
}
else
{
alert("You have entered an invalid email address!");
document.rform.email.focus();
return false;
}
return true;
}
.inputs:focus{
box-shadow: 0 0 10px #ff0000;
border-color: #ff0000;
outline: none !important;
}
<form method="POST" name="rform" action=" " onsubmit="return(validate());">
<label for="right-label" class="right inline">First Name</label>
<input class="inputs" type="text" id="right-label" placeholder="First Name" name="fname" requried>
<br>
<label for="right-label" class="right inline">Last Name</label>
<input class="inputs" type="text" id="right-label" placeholder="Last Name" name="lname" requried>
<br>
<label for="right-label" class="right inline">Address</label>
<input class="inputs" type="text" id="right-label" placeholder="Address" name="address" requried>
<br>
<label for="right-label" class="right inline">City</label>
<input class="inputs" type="text" id="right-label" placeholder="City" name="city" requried>
<br>
<label for="right-label" class="right inline">Pin Code</label>
<input class="inputs" type="number" id="right-label" placeholder="Pincode" name="pincode" requried>
<br>
<label for="right-label" class="right inline">E-Mail</label>
<input class="inputs" type="email" id="right-label" placeholder="Mail Id" name="email" requried>
<br>
<label for="right-label" class="right inline">Mobile Number</label>
<input class="inputs" type="number" id="mobilenumber" placeholder="Mobile Number" name="mobile_num" requried>
<br>
<input type="submit" id="right-label" value="Register" name="submit" >
<input type="reset" id="right-label" value="Reset">
</form>
You can add hidden error class below every input fields. You can validate the form using javascript and jquery. If the input is wrong you can make the error class appear.
HTML :
<form method="POST" id="register_form" action=" " autocomplete="off">
<label for="right-label" class="right inline">First Name</label>
<input class="inputs" type="text" id="firstName" placeholder="First Name">
<small id="fn_error" class="form-text text-muted"></small>
<br>
<label for="right-label" class="right inline">Last Name</label>
<input class="inputs" type="text" id="lastName" placeholder="Last Name">
<small id="ln_error" class="form-text text-muted"></small>
<br>
<input type="submit" id="right-label" value="Register" name="submit" >
<input type="reset" id="right-label" value="Reset">
</form>
JS :
$('#register_form').on("submit",function () {
var firstName= $("#firstName");
var lastName= $("#lastName");
var status = false;
if (firstName.val() == "") {
firstName.addClass("borer-danger");
$("#fn_error").html("<span class='text-danger'>Please Enter Email</span>");
status = false;
} else {
firstName.removeClass("border-danger");
$("#fn_error").html("");
status = true
}
if (lastName.val() == "") {
lastName.addClass("borer-danger");
$("#ln_error").html("<span class='text-danger'>Please Enter Last Name</span>");
status = false;
} else {
lastName.removeClass("border-danger");
$("#ln_error").html("");
status = true
}
if (status == true) {
alert("Ready");
}
})
required attribute doesn't work on my form. What am I doing wrong?
Here is my code in HTML:
<form id="main-contact-form" method="POST">
<fieldset class="form-group">
<input id="name" placeholder="Nome" class="form-control" type="text" tabindex="1" required /></fieldset>
<fieldset class="form-group">
<input id="email" placeholder="E-mail" class="form-control" type="email" tabindex="2" required /></fieldset>
<fieldset class="form-group">
<input id="phone" placeholder="Numero di telefono" class="form-control" type="tel" tabindex="3" required /></fieldset>
<fieldset class="form-group">
<textarea id="message" class="form-control" rows="8" placeholder="Scrivi un messaggio.." tabindex="5" required /></textarea></fieldset>
<fieldset>
<button name="submit" class="btn btn-primary" id="submitBtn">Invia Messaggio</button>
</fieldset>
</form>
<div id="feedback"></div>
Here is the php code in the head tag:
<script>
$(document).ready(function(){
$( "#submitBtn" ).click(function( event ) {
//values
var name=document.getElementById('name').value;
var email=document.getElementById('email').value;
var phone=document.getElementById('phone').value;
var message=document.getElementById('message').value;
var dataString = {"name": name, "email":email, "phone": phone, "message":message}
$.ajax({
type:"post",
url:"submitForm.php",
data: dataString,
success: function(html) {
$('#feedback').html(html);
}
});
event.preventDefault();
});
});
</script>
I want to save data generated from a an HTML form to JSON file in my computer, I'm totally new in the field. I have attached below the HTML and JavaScript code.
<form id="test" action="#" method="post">
<div class="form-group">
<label for="name">Name</label>
<input class="form-control" type="text" name="name" id="name" />
</div>
<div class="form-group">
<label for="check">Check if you like JavaScript</label>
<input type="checkbox" name="check" value="yes" />
</div>
<div class="form-group">
<label for="select">Select your favorite JavaScript framework</label>
<select name="select" class="form-control">
<option value="none" selected="selected">None</option>
<option value="jquery">jQuery</option>
<option value="angularjs">Angular</option>
<option value="mine">Mine, of course!</option>
</select>
</div>
<div class="form-group">
<label for="message">Leave a message</label>
<textarea class="form-control" name="message" rows="15" cols="30"></textarea>
</div>
<div class="form-group">
<label for="email">Email</label>
<input class="form-control" type="text" name="email" id="email" />
</div>
<div class="form-group">
<label for="password">Password</label>
<input class="form-control" type="password" name="password" id="password" />
</div>
<p>
<input type="submit" value="Send" class="btn btn-primary btn-block" />
</p>
</form>
<pre id="output"></pre>
(function() {
function toJSONString( form ) {
var obj = {};
var elements = form.querySelectorAll( "input, select, textarea" );
for( var i = 0; i < elements.length; ++i ) {
var element = elements[i];
var name = element.name;
var value = element.value;
if( name ) {
obj[ name ] = value;
}
}
return JSON.stringify( obj );
}
document.addEventListener( "DOMContentLoaded", function() {
var form = document.getElementById( "test" );
var output = document.getElementById( "output" );
form.addEventListener( "submit", function( e ) {
e.preventDefault();
var json = toJSONString( this );
output.innerHTML = json;
}, false);
});
})();
Instead of displaying the JSON content I want to store it in a JSON file.
I'm new to AngularJS. I wrote code like this,
var myApp2 = angular.module('myApp2', []);
myApp2.controller('studentController', function($scope) {
$scope.student = {
firstName: "first name",
lastName: "last name",
fullName: function() {
var studentObject = $scope.student;
return studentObject.firstName + " " + studentObject.lastName;
}
};
});
var myApp1 = angular.module('myApp1', []);
myApp1.controller('productController', function($scope) {
$scope.quantity = 0;
$scope.cost = 0;
$scope.getTotalCost = function() {
return $scope.quantity * $scope.cost;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="col-lg-3" ng-app="myApp1" ng-controller="productController">
<label class="label label-default">Quantity :</label>
<input type="number" class="form-control" ng-model="quantity" />
<br>
<br>
<label class="label label-default">Cost :</label>
<input type="number" class="form-control" ng-model="cost" />
<br>
<br>
<label class="label label-success">Product :</label><span class="form-control disabled" ng-bind="getTotalCost()"></span>
</div>
<div class="col-lg-3" ng-app="myApp2" ng-controller="studentController">
<label class="label label-default">First name:</label>
<input type="text" class="form-control" ng-model="student.firstName" />
<br>
<br>
<label class="label label-default">Last name:</label>
<input type="text" class="form-control" ng-model="student.lastName" />
<br>
<br>
<label class="label label-success">You are entering:</label> <span class="form-control disabled" ng-bind="student.fullName()"></span>
</div>
the second div is not initialized. I think the controller is not executing.
If I remove the first div then it does.
What's wrong with it?
You will require manual bootstrapping for this, find link below :
https://stackoverflow.com/a/18583329/1939542