Here is my code:
<form class="form-horizontal"
name="commentForm"
ng-submit="submitComment()"
novalidate>
<div class="form-group"
ng-class="{ 'has-error has-feedback' : commentForm.name.$invalid && !commentForm.name.$pristine }">
<label for="name" class="col-sm-2 control-label">Your name</label>
<div class="col-sm-10">
<input type="text"
name="name"
class="form-control"
placeholder="your name"
ng-model="comment.name"
id="name">
<span class="help-block"
ng-show="commentForm.name.$error.required && !commentForm.name.$pristine">
Name required
</span>
</div>
</div>
<div class="form-group">
<label for="radio" class="col-sm-2 control-label" > Rating </label>
<div class="col-sm-10">
<label class="radio-inline" ng-repeat="star in stars">
<input type="radio" name="star.value"
ng-value="{{star.value}}"
ng-model="comment.rating"
ng-checked="isSelected(star.value)">
{{star.value}}
</label>
</div>
</div>
<div class="form-group" ng-class="{'has-error has-feedback':comment.textComments.$error.required && !comment.textComments.$pristine}">
<label for="name" class="col-sm-2 control-label">Your comments</label>
<div class="col-sm-10">
<textarea rows="12" class="form-control" name="textComments" id="comments" ng-model="comment.textComments" placeholder="your comments">
</textarea>
<span class="help-block" ng-show="comment.textComments.$error.required && !comment.textComments.$pristine">comments Required</span>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary" ng-disabled="commentForm.$invalid">Submit</button>
</div>
</div>
</form>
here's my script
.controller('DishCommentController', ['$scope', function($scope) {
var stars=[
{value:"1"},
{value:"2"},
{value:"3"},
{value:"4"},
{value:"5"}
];
$scope.isSelected = function(checkStar){
console.log(checkStar==5);
return checkStar==5;
};
$scope.stars=stars;
$scope.comment={name:"",rating:"",textComments:"",date:""};
$scope.submitComment = function () {
$scope.comment.date=new Date().toISOString();
// Step 3: Push your comment into the dish's comment array
$scope.dish.comments.push("Your JavaScript Object holding the comment");
}
}]);
please someone help me on this
You're missing 'required' attribute in your input fields and you're trying to access property of undefined object '$scope.dish.comments'.
See code below:
(function() {
'use strict';
angular.module('app', []).controller('DishCommentController', DishCommentController);
function DishCommentController($scope) {
var stars = [{
value: "1"
}, {
value: "2"
}, {
value: "3"
}, {
value: "4"
}, {
value: "5"
}
];
$scope.isSelected = function(checkStar) {
console.log(checkStar == 5);
return checkStar == 5;
};
$scope.stars = stars;
//select default values here
$scope.comment = {
name: "",
rating: 4,
textComments: "",
date: ""
};
$scope.submitComment = function() {
$scope.comment.date = new Date().toISOString();
// Step 3: Push your comment into the dish's comment array
// $scope.dish.comments.push("Your JavaScript Object holding the comment");
};
}
})();
<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="angularjs#1.5.5" data-semver="1.5.5" src="https://code.angularjs.org/1.5.5/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="DishCommentController">
<form name="commentForm" ng-submit="submitComment()" novalidate>
<div class="form-group">
<label for="name">Your name</label>
<div>
<input type="text" name="name" class="form-control" placeholder="your name" ng-model="comment.name" id="name" required>
<span class="help-block" ng-show="commentForm.name.$error.required && !commentForm.name.$pristine">Name required</span>
</div>
</div>
<div class="form-group">
<label for="radio" class="col-sm-2 control-label">Rating</label>
<div class="col-sm-10">
<label class="radio-inline" ng-repeat="star in stars">
<input type="radio" name="star.value" ng-value="{{star.value}}" ng-model="comment.rating" ng-checked="isSelected(star.value)">{{star.value}}
</label>
</div>
</div>
<div class="form-group">
<label for="name" class="col-sm-2 control-label">Your comments</label>
<div class="col-sm-10">
<textarea rows="12" class="form-control" name="textComments" id="comments" ng-model="comment.textComments" required placeholder="your comments">
</textarea>
<span class="help-block" ng-show="comment.textComments.$error.required && !comment.textComments.$pristine">comments Required</span>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary" ng-disabled="commentForm.$invalid">Submit</button>
</div>
</div>
</form>
</body>
</html>
Related
Hello guys my firebase real-time database update function is updating all the data with new data, I'm attaching the image of the database before the update
And after the update all the fields of A and B are changed into C, the source code is available below :
Frontend:
<form onsubmit="return false">
<input type="hidden" id="hiddenId">
<div class="form-row">
<div class="form-group col-12">
<label class="uname">Course Code</label>
<input type="text" class="form-control uname-box" id="popupCourseCode" aria-describedby="emailHelp" placeholder="Course Code">
</div>
</div>
<div class="form-row">
<div class="form-group col-12">
<label class="uname">Course Title</label>
<input type="text" class="form-control uname-box" id="popupCourseTitle" aria-describedby="emailHelp" placeholder="Course Title">
</div>
</div>
<div class="form-row">
<div class="form-group col-12">
<label class="uname">Subject</label>
<input type="text" class="form-control uname-box" id="popupSubject" aria-describedby="emailHelp" placeholder="Subject">
</div>
</div>
<div class="form-row">
<div class="form-group col-12">
<label class="uname">Credits</label>
<input type="number" class="form-control uname-box" id="popupCredits" aria-describedby="emailHelp" placeholder="Credits">
</div>
</div>
<div class="form-row">
<div class="form-group col-12">
<label class="uname">Grades</label>
<input type="text" class="form-control uname-box" id="popupGrades" aria-describedby="emailHelp" placeholder="Grades">
</div>
</div>
</form>
Function:
function update() {
firebase.database().ref('academics').orderByKey().once('value', snap => {
snap.forEach((data) => {
var popupCourseCode = document.getElementById('popupCourseCode');
var popupCourseTitle = document.getElementById('popupCourseTitle');
var popupSubject = document.getElementById('popupSubject');
var popupCredits = document.getElementById('popupCredits');
var popupGrades = document.getElementById('popupGrades');
var updates = {
courseCode: popupCourseCode.value,
courseTitle: popupCourseTitle.value,
subject: popupSubject.value,
credits: popupCredits.value,
grade: popupGrades.value,
}
firebase.database().ref('academics/' + data.key).update(updates)
// alert('updated')
console.log(`Update FunctionKey!!!!!!!!!!!! >>>>>>>>> ${data.key}`)
})
// console.log(`Remove FunctionKey!!!!!!!!!!!! >>>>>>>>> ${data.key}`)
})
}
Please provide me a solution. Thanks in anticipation
I'm trying to create a edit profile section in angularjs. For that i create in my users controller a section to make a rest api call to get info to inject on the page and later i will do the parte of changePassword also.
At the moment i'm getting the error "Error: [ng:areq] Argument 'UsersSettingsController' is not a function, got undefined" and I cant undestand why.
editAccount view:
<div class="row" ng-controller="UsersSettingsController as usersSettingsCtrl" >
{{userInfo}}
<!-- edit form column -->
<div class="col-md-9 personal-info">
<h3>Personal info</h3>
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-md-3 control-label">Username:</label>
<div class="col-md-8">
<input class="form-control" type="text" style="background-color: #fff" value="{{userInfo.username}}" readonly>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Organization:</label>
<div class="col-lg-8">
<input class="form-control" type="text" style="background-color: #fff" value="{{userInfo.organization_name}}" readonly>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Permission Group:</label>
<div class="col-lg-8">
<input class="form-control" type="text" style="background-color: #fff" value="{{userInfo.permission_group_name}}" readonly>
</div>
</div>
<div class="form-group" nf-ig="user.organization_permission_group_id=='df0417e3-ce36-41ca-9f13-f58c1a3a96f5'">
<label class="col-lg-3 control-label">Root:</label>
<div class="col-lg-8">
<input class="form-control" type="text" style="background-color: #fff" value="{{userInfo.data.root}}" readonly>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Email:</label>
<div class="col-lg-8">
<input class="form-control" type="text" style="background-color: #fff" value="{{userInfo.username}}" readonly>
</div>
</div>
<hr>
<h4>Change Password</h4>
<br>
<form name="newPasswordForm" role="form" ng-submit="newPasswordForm.$valid && ok()" novalidate>
<div class="form-group">
<label class="col-md-3 control-label">Change Password:</label>
<div class="col-md-8">
<input type="password" name="newPassword" ng-model="password.new"
ng-minlength="6" required />
<span class="help-block"
ng-show="newPasswordForm.newPassword.$dirty && newPasswordForm.newPassword.$invalid">
Please enter a new password, it must be at least 6 characters long.
</span>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Confirm password:</label>
<div class="col-md-8">
<input type="password" name="newPasswordConfirm"
ng-model="password.confirm" ng-minlength="6"
value-matches="password.new" required />
<span class="help-block"
ng-show="newPasswordForm.newPasswordConfirm.$dirty && newPasswordForm.newPasswordConfirm.$invalid">
Please enter the same password again to confirm.
</span>
</div>
</div>
</form>
<div class="form-group">
<label class="col-md-3 control-label"></label>
<div class="col-md-8">
<input type="button" class="btn btn-primary" style="float:right" value="Save Changes">
<div ng-messages="registrationForm.confirmPassword.$error" ng-messages-include="messages.html"></div>
</div>
</div>
</form>
</div>
</div>
usersController:
app.controller('UsersSettingsController',['$scope', 'user', function ($scope, user) {
$http.get('/api/users/userInfo/'+user.id).success(function (data) {
console.log("user info ",data);
$scope.userInfo = data;
});
//changePassword call to rest api
}]);
usersDirective:
(function() {
var app = angular.module('userSettings', []);
app.directive('valueMatches', ['$parse', function ($parse) {
return {
require: 'ngModel',
link: function (scope, elm, attrs, ngModel) {
var originalModel = $parse(attrs.valueMatches),
secondModel = $parse(attrs.ngModel);
// Watch for changes to this input
scope.$watch(attrs.ngModel, function (newValue) {
ngModel.$setValidity(attrs.name, newValue === originalModel(scope));
});
// Watch for changes to the value-matches model's value
scope.$watch(attrs.valueMatches, function (newValue) {
ngModel.$setValidity(attrs.name, newValue === secondModel(scope));
});
}
};
}]);
})();
I am having an issue using jQuery validate against a form in a current project.
I am sure it is a typo I am missing or something small, but can't sem to figure out why it is occurring.
The error I am getting in the console debugger is: Object doesn't support property or method 'validate'
The bundle configuration file:
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.validate*"));
bundles.Add(new ScriptBundle("~/bundles/custom").Include(
"~/Scripts/ContactForm.js"));
The code snippets are below:
<form action="#Url.Action("UpdateContactInformation", "ContactController")" method="post" role="form" class="form-horizontal" id="contactForm">
<input type='hidden' name='csrfmiddlewaretoken' value='brGfMU16YyyG2QEcpLqhb3Zh8AvkYkJt' />
<!-- First Name Form Field-->
<div class="form-group required">
<label class="col-md-2 control-label">First Name</label>
<div class="col-md-4">
<input class="form-control" id="id_firstName" maxlength="75" name="txtFirstName" placeholder="First Name" required="required" title="" type="text" />
</div>
</div>
<!-- Last Name Form Field-->
<div class="form-group required">
<label class="col-md-2 control-label">Last Name</label>
<div class="col-md-4">
<input class="form-control" id="id_lastName" maxlength="75" name="txtlastName" placeholder="Last Name" required="required" title="" type="text" />
</div>
</div>
<!-- Title Form Field-->
<div class="form-group required">
<label class="col-md-2 control-label">Title</label>
<div class="col-md-4">
<input class="form-control" id="id_title" maxlength="75" name="txtTitle" placeholder="Title" required="required" title="" type="text" />
</div>
</div>
<!-- Address Form Field-->
<div class="form-group required">
<label class="col-md-2 control-label">Address</label>
<div class="col-md-4">
<input class="form-control" id="id_address" maxlength="75" name="txtAddress" placeholder="Address" required="required" title="" type="text" />
</div>
</div>
<!-- City Form Field-->
<div class="form-group required">
<label class="col-md-2 control-label">City</label>
<div class="col-md-4">
<input class="form-control" id="id_city" maxlength="75" name="txtCity" placeholder="City" required="required" title="" type="text" />
</div>
</div>
<!-- State Form Field-->
<div class="form-group required">
<label class="col-md-2 control-label">State</label>
<div class="col-md-4">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenuStates" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Select State
<span class="caret"></span>
</button>
<ul class="dropdown-menu" id="statesDropDownMenu" aria-labelledby="dropdownMenuStates">
</ul>
</div>
</div>
</div>
<!-- Zip Form Field-->
<div class="form-group required">
<label class="col-md-2 control-label">ZipCode</label>
<div class="col-md-4">
<input class="form-control" id="id_zipCode" maxlength="75" name="txtZipCode" placeholder="ZipCode" required="required" title="" type="number" />
</div>
</div>
<!-- Email Primary Form Field-->
<div class="form-group required">
<label class="col-md-2 control-label">Email Primary</label>
<div class="col-md-4">
<input class="form-control customEmail" id="id_emailPrimary" maxlength="75" name="txtEmailPrimay" placeholder="Email Primary" required="required" />
</div>
</div>
<!-- Email Secondary (optional) Form Field-->
<div class="form-group">
<label class="col-md-2 control-label">Email (Optional)</label>
<div class="col-md-4">
<input class="form-control" id="id_emailSecond" maxlength="75" name="txtEmailSecond" placeholder="Email (Optional)" title="Email (Optional)" type="email" />
</div>
</div>
<!-- Email Third (optional) Form Field-->
<div class="form-group">
<label class="col-md-2 control-label">Email (Optional)</label>
<div class="col-md-4">
<input class="form-control" id="id_emailThird" maxlength="75" name="txtEmailThird" placeholder="Email (Optional)" title="Email (Optional)" type="email" />
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary">
<span class="glyphicon glyphicon-user"></span> Submit Contact Info
</button>
</div>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/jqueryval");
#Scripts.Render("~/bundles/custom"); //contains the file I am trying to add $.validate.AddMethod() to
Here is the code for Contact.js
$.validator.addMethod(
"customEmail",
function (value, element) {
var re = new RegExp("/^#{0,2}\w+([-+.']\w+)*#\w+([-.]\w+)*\.\w+([-.]\w+)*#{0,2}$/");
return this.optional(element) || re.test(value);
},
"Please enter a valid email address."
);
$(document).ready(function () {
console.log("Were here.........");
// populateStatesDropDown();
$('#contactForm').validate({ // initialize the plugin
rules: {
txtZipCode: {
required: true,
numeric: true
},
txtEmailPrimay: {
required: true,
customEmail:true
},
txtEmailSecond:{
required:false,
customEmail:true,
},
txtEmailThird: {
required: false,
customEmail:true
}
}
});
populateStatesList();
});
function populateStatesList() {
var url = "Contact/GetStates"; // Don't hard code your url's!
//$("#province_dll").change(function () {
var $statesDropDownMenu = $("#statesDropDownMenu"); // Use $(this) so you don't traverse the DOM again
var listItems = '';
$.getJSON(url, function (response) {
$statesDropDownMenu.empty(); // remove any existing options
console.log(response);
$.each(response, function (index, item) {
console.log("Now - " + item);
listItems += "<li>" + item + "</li>";
});
$statesDropDownMenu.html(listItems);
});
//});
}
You have an extra comma.
txtEmailSecond:{
required:false,
customEmail:true, // Here
},
Hi I'm trying to put together the next object
$scope.passengers = {
adult : [ {firstname: "name", lastname: "anothername"},{firstname: "name", lastname: "anothername"},{firstname: "name", lastname: "anothername"}],
child : [ {firstname: "name", lastname: "anothername"},{firstname: "name", lastname: "anothername"},{firstname: "name", lastname: "anothername"}],
extras : "someValue"} ;
In my controller I have the following
$scope.passengers = {};
$scope.passengers.adult = [];
$scope.passengers.child = [];
$scope.numberAdult = 10;
$scope.numberChildren = 10;
Y las funciones
//Functions return an array null
$scope.getNumber = function(num) {
num = parseInt(num);
return new Array(num);
};
$scope.savePassengers = function(product_id)
{
//for the moment only print the variable
console.log($scope.passengers)
}
In My HTML page
<form name="passengers-form" ng-submit="savePassengers(product.id)">
<div class="col-lg-12">
<div class="form-horizontal">
<div class="row">
<div class="form-group" ng-repeat="a in getNumber(numberAdult) track by $index">
<label class="col-sm-3 control-label">Adult {{$index + 1 }}</label>
<div class="col-sm-3">
<input required ng-model="passengers.adult[$index].firstname" class="form-control" placeholder="First Name" type="text">
</div>
<div class="col-sm-3">
<input required ng-model="passengers.adult[$index].lastname" class="form-control" placeholder="Last Name" type="text">
</div>
</div>
<div class="form-group" ng-repeat="a in getNumber(numberChildren) track by $index">
<label class="col-sm-3 control-label">Child {{$index + 1 }}</label>
<div class="col-sm-3">
<input required ng-model="passengers.child[$index].firstname" class="form-control" placeholder="First Name" type="text">
</div>
<div class="col-sm-3">
<input required ng-model="passengers.child[$index].lastname" class="form-control" placeholder="Last Name" type="text">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Extras</label>
<div class="col-sm-6">
<textarea name="" ng-model="passengers.extras"class="form-control" id="" cols="30" rows="10"></textarea>
</div>
</div>
<div class="col-xs-9 col-sm-9 col-md-9 col-lg-9">
<div class="form-group buttons pull-right">
<button class="btn btn-primary" id="guardar" type="submit">
<i class="fa fa-save"></i>Add to Cart ->
</button>
</div>
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
</form>
But, when i print the variable "passenger" , the console show : Object {extras: "someValue"}
Your problem is that ng-repeat creates an isolated scope, so your input fields are not reflecting in the correct scope. This can further be verified by your extras field being properly fulfilled.
You should change these lines in your HTML:
<input required ng-model="$parent.passengers.adult[$index].firstname" class="form-control" placeholder="First Name" type="text">
...
<input required ng-model="$parent.passengers.adult[$index].lastname" class="form-control" placeholder="Last Name" type="text">
And do the same thing for the children area.
I'm new to angular but picking it up quickly. I have this controller that works, based on demo code ive hacked together, but there has to be an easier cleaner way to get all the fields and post so if i want to add a new field i dont need to keep adding it in the various locations.
Heres the controller:
'use strict';
angular.module('goskirmishApp').controller('addEvent', function ($scope, fbutil, $timeout) {
// synchronize a read-only, synchronized array of messages, limit to most recent 10
$scope.messages = fbutil.syncArray('messages', {limit: 10});
// display any errors
$scope.messages.$loaded().catch(alert);
// provide a method for adding a message
$scope.addMessage = function(newEventName,newEventType,newStartDate,newStartTime,newEndDate,newEndTime,newEventDescription,newAddress,newPostcode,newTicketInformation,newBookLink) {
if( newEventName ) {
// push a message to the end of the array
$scope.messages.$add({
eventName: newEventName,
eventType: newEventType,
startDate: newStartDate,
startTime: newStartTime,
endDate: newEndDate,
endTime: newEndTime,
eventDescription: newEventDescription,
address: newAddress,
postcode: newPostcode,
ticketInformation: newTicketInformation,
bookLink: newBookLink
})
// display any errors
.catch(alert);
}
};
function alert(msg) {
$scope.err = msg;
$timeout(function() {
$scope.err = null;
}, 5000);
}
});
And the view:
<h2>Add Event</h2>
<p class="alert alert-danger" ng-show="err">{{err}}</p>
<form role="form">
<div class="form-group">
<label>Event Name</label>
<input class="form-control" type="text" ng-model="newEventName">
</div>
<div class="form-group">
<label>Event Type</label>
<select class="form-control" ng-model="newEventType">
<option value="" disabled selected>Game type</option>
<option value="milsim">Skirmish</option>
<option value="milsim">Special Event</option>
<option value="milsim">Weekender</option>
<option value="milsim">Milsim</option>
</select>
</div>
<div class="form-group">
<label>Start Date & Time</label>
<div class="row">
<div class="col-sm-6">
<input class="form-control" type="date" placeholder="Date" ng-model="newStartDate"/>
</div>
<div class="col-sm-6">
<input class="form-control" type="time" placeholder="Time" ng-model="newStartTime"/>
</div>
</div>
</div>
<div class="form-group">
<label>End Date & Time</label>
<div class="row">
<div class="col-sm-6">
<input class="form-control" type="date" placeholder="Date" ng-model="newEndDate"/>
</div>
<div class="col-sm-6">
<input class="form-control" type="time" placeholder="Time" ng-model="newEndTime"/>
</div>
</div>
</div>
<div class="form-group">
<label>Event Description</label>
<textarea class="form-control" rows="4" ng-model="newEventDescription"></textarea>
</div>
<div class="form-group">
<label>Address</label>
<input class="form-control" ng-model="newAddress">
</div>
<div class="form-group">
<label>Postcode</label>
<input class="form-control" ng-model="newPostcode">
</div>
<div class="form-group">
<label>Ticket Information</label>
<textarea class="form-control" rows="4" ng-model="newTicketInformation"></textarea>
</div>
<div class="form-group">
<label>Booking Link</label>
<input class="form-control" ng-model="newBookLink">
</div>
<button type="submit" class="btn btn-danger" ng-click="addMessage(newEventName,newEventType,newStartDate,newStartTime,newEndDate,newEndTime,newEventDescription,newAddress,newPostcode,newTicketInformation,newBookLink,newLat,newLong,newApproved);newEventName = null;newEventType = null;newStartDate = null;newStartTime = null;newEndDate = null;newEndTime = null;newEventDescription = null;newAddress = null;newPostcode = null;newTicketInformation = null;newBookLink = null;">Add Event</button>
</form>
Help is greatly appreciated!
Define all your input in a object that you will be directly send send to firebase
For example init in your controller this :
$scope.form = {};
After in your template just define your input as 'form attributes'.
<h2>Add Event</h2>
<p class="alert alert-danger" ng-show="err">{{err}}</p>
<form role="form">
<div class="form-group">
<label>Event Name</label>
<input class="form-control" type="text" ng-model="form.eventName">
</div>
<div class="form-group">
<label>Event Type</label>
<select class="form-control" ng-model="form.eventType">
<option value="" disabled selected>Game type</option>
<option value="milsim">Skirmish</option>
<option value="milsim">Special Event</option>
<option value="milsim">Weekender</option>
<option value="milsim">Milsim</option>
</select>
</div>
<div class="form-group">
<label>Start Date & Time</label>
<div class="row">
<div class="col-sm-6">
<input class="form-control" type="date" placeholder="Date" ng-model="form.startDate"/>
</div>
<div class="col-sm-6">
<input class="form-control" type="time" placeholder="Time" ng-model="form.startTime"/>
</div>
</div>
</div>
<div class="form-group">
<label>End Date & Time</label>
<div class="row">
<div class="col-sm-6">
<input class="form-control" type="date" placeholder="Date" ng-model="form.endDate"/>
</div>
<div class="col-sm-6">
<input class="form-control" type="time" placeholder="Time" ng-model="form.endTime"/>
</div>
</div>
</div>
<div class="form-group">
<label>Event Description</label>
<textarea class="form-control" rows="4" ng-model="form.eventDescription"></textarea>
</div>
<div class="form-group">
<label>Address</label>
<input class="form-control" ng-model="form.address">
</div>
<div class="form-group">
<label>Postcode</label>
<input class="form-control" ng-model="form.postcode">
</div>
<div class="form-group">
<label>Ticket Information</label>
<textarea class="form-control" rows="4" ng-model="form.ticketInformation"></textarea>
</div>
<div class="form-group">
<label>Booking Link</label>
<input class="form-control" ng-model="form.bookLink">
</div>
<button type="submit" class="btn btn-danger" ng-click="addMessage()">Add Event</button>
</form>
and directly in your addMessage function
$scope.addMessage = function() {
if( $scope.form.eventName ) {
// push a message to the end of the array
$scope.messages.$add($scope.form)
// display any errors
.catch(alert);
//Reset your form
$scope.form = {};
}
};