I would like to push text via a html form in my array. The problem is that every tutorial I habe seen only explains how I add one variable.
My Array:
(this is that I mean)
$scope.titles = [{
title: 'New Divide',
artist: 'Linkin Park',
album: 'New Divide',
genre: 'Rock',
cover: 'new-divide.jpg',
titleLength: '4:28',
file: 'test'
}];
My html form:
<form ng-submit="musicController.addMusic(musicController.titles, musicController.artist, musicController.album, musicController.genre, musicController.titleLength, musicController.cover, musicController.file)">
<input ng-model="musicController.title" type="text" />
<input ng-model="musicController.artist" type="text" />
<input ng-model="musicController.album" type="text" />
<input ng-model="musicController.genre" type="text" />
<input ng-model="musicController.titleLength" type="text" />
<input ng-model="musicController.cover" type="text" />
<input ng-model="musicController.file" type="text" />
<button type="submit" class="btn btn-primary">Add</button>
</form>
You should define the ng-model for each of your inputs as an object property. That way they will all be grouped together in one object so you won't have to push each individual value:
<form ng-submit="musicController.addMusic(musicController.record)">
<input ng-model="musicController.record.title" type="text" />
<input ng-model="musicController.record.artist" type="text" />
<input ng-model="musicController.record.album" type="text" />
<input ng-model="musicController.record.genre" type="text" />
<input ng-model="musicController.record.titleLength" type="text" />
<input ng-model="musicController.record.cover" type="text" />
<input ng-model="musicController.record.file" type="text" />
<button type="submit" class="btn btn-primary">Add</button>
</form>
Just to clarify, your addMusic function should look something like the following:
$scope.addMusic = function(record) {
$scope.titles.push(record);
};
Related
I want to insert my form data into database using cakephp. I created form.ctp file in layouts folder. Now how can I insert form values to database in form.ctp file?
Here is my code:
<html>
<form action="../users/register" method="post">
<p>Please fill out the form below to register an account.</p>
<label>Username:</label><input name="username" size="40" />
<label>Password:</label><input type="password" name="password" size="40"
/>
<label>Email Address:</label><input name="email" size="40"
maxlength="255" />
<label>First Name:</label><input name="first_name" size="40" />
<label>Last Name:</label><input name="last_name" size="40" />
<input type="submit" value="register" />
</form>
</html>
<html>
<form action="../users/register" method="post">
<p>Please fill out the form below to register an account.</p>
<label>Username:</label><input name="users[username]" size="40" />
<label>Password:</label><input type="users[password]" name="password" size="40" />
<label>Email Address:</label><input name="users[email]" size="40"
maxlength="255" />
<label>First Name:</label><input name="users[first_name]" size="40" />
<label>Last Name:</label><input name="users[last_name]" size="40" />
<input type="submit" value="register" />
</form>
</html>
and save by
if ($this->request->is('post')) {
$this->User->save($this->request->data);
}
OR
save your data without change form by
if ($this->request->is('post')) {
$this->request->data['User'] = $this->request->data;
$this->User->save($this->request->data);
}
I want to store the data in an array using the ng-model. I have an controller as RegisterController in which i inject $scope with ng-model name as user i.e. $scope.user={}.Here i am reading the data from form input element and submitting the data that has ng-model="user.name" and now i want to store that name or the multiple values in that user object.
<form class="well" align="center">
<input ng-model="user.name" name="name" type="text"><br/>
<input ng-model="user.name" name="mobile" type="text"><br/>
<input ng-model="user.name" name="mail" type="mail"><br/>
<input ng-model="user.name" type="password" name="otp"><br/><br/>
<button type="button">Sign Up</button>
Login<br><br>
</form>
and the controller is
app.controller("RegisterController",function($scope){
$scope.user={};
})
Now let me know to store the data in the user that as array with example
I think your doing a small mistake. Instead of sending the same ng-model="user.name" send is as,
<form class="well" align="center">
<input ng-model="user.name" name="name" type="text"><br/>
<input ng-model="user.mobile name="mobile" type="text"><br/>
<input ng-model="user.mail" name="mail" type="mail"><br/>
<input ng-model="user.password" type="password" name="otp"><br/><br/>
<button type="button">Sign Up</button>
Login<br><br>
</form>
And you have to send that ng-model to the function as in button
<button type="button" ng-click="signup(user)">SignUp</button>
now you can able to get what you want
Guys it was very simple and now i get. In HTML it should be like this,
<div ng-controller="RegisterController">
<form class="well" align="center">
<input ng-model="user.name" name="name" type="text"><br/>
<input ng-model="user.mobile name="mobile" type="text"><br/>
<input ng-model="user.mail" name="mail" type="mail"><br/>
<input ng-model="user.password" type="password" name="otp"><br/><br/>
<button type="button" ng-click="signup(user)">Sign Up</button>
Login<br><br>
</form>
</div>
Now In Register Controller, i need just, an array as follows:
app.controller("RegisterController",function($scope){
$scope.regruser=[];
$scope.signup=function(user){
$scope.regruser.push(user);
}
})
Now you can get $scope.regruser where you needed. as it having all registered user.
I don't see any benefit of storing the user model in an array. Instead extend the user model with properties name, mobileNumber, email, password
$.scope.user = {
name: '',
mobileNumber: '',
email: ''
password: ''
}
And in your html bind model properties to their corresponding input fields like
<input class="form-group" name="mobile" type="text" placeholder="Enter Mobile Number" ng-model="user.name.mobileNumber"/>
And if you still need to have an array then parse the $scope.user model and extract values to array in angular controller.
HTML PART
<form class="well" align="center">
<input class="form-group" name="name" type="text" placeholder="Enter Name" ng-model="user.name"><br/>
<input class="form-group" name="mobile" type="text" placeholder="Enter Mobile Number" ng-model="user.mobile"><br/>
<input class="form-group" name="mail" type="mail" placeholder="Enter mail id" ng-model="user.mail"><br/>
<input class="form.group" type="password" name="otp" placeholder="Enter Password" ng-model="user.password"><br/><br/>
<button type="button" class="btn btn-warning btn-sm" ng-click="signUp()">Sign Up</button>
Login<br><br>
</form>
Code For Controller :
$scope.user = {
name: '',
mobile: '',
mail: '',
password: ''
};
This answer is a correction to Andrejs Abrickis answer as well. Because:
he misses comma after email
he misses semi-colon after "}"
Adds an extra dot in between $ & scope
Thanks You... Hope It Helps You all.. :)
I would like to set invalid with angular when firstname is equals to lastname and change the color using styles to red.
http://jsbin.com/japir/2
function RegoController($scope) {
$scope.app = {
firstName: "Saroj"
};
$scope.$watch("app.lastName", function(newVal, oldVal) {
if (!!$scope.app.lastName && !!newVal)
if (angular.lowercase($scope.app.firstName) === angular.lowercase(newVal)) {
debugger;
$scope.form.inputLastName.$setValidity("sameName", false);
}
});
}
<body ng-app>
<div class="container" ng-controller="RegoController">
<div class="col-lg-4">
<form name="form">
<div class="form-group">
<label for="inputFirstName">First Name</label>
<input id="inputFirstName" class="form-control" type="text" ng-model="app.firstName" placeholder="Enter your firstname" required ng-minlength="3" ng-maxlength="20" />
</div>
<div class="form-group">
<label for="inputLastName">Last Name</label>
<input id="inputLastName" class="form-control" type="text" ng-model="app.lastName" placeholder="Enter your last name" required ng-minlength="3" ng-maxlength="20" />
</div>
<div class="form-group">
<label for="inputEmail">Email</label>
<input id="inputEmail" class="form-control" type="email" ng-model="app.email" placeholder="Enter your email" required />
</div>
<div class="form-group">
<input type="submit" class="btn btn-primary" value="Save" />
</div>
</form>
{{app}}
</div>
</div>
</body>
The problem is that you are trying to select a form input that has no name; thus making it unable to find the field you are trying to invalidate. Here is a working example:
JSBIN: http://jsbin.com/yozanado/1/
Input field with name:
<input id="inputLastName" name="lastName" class="form-control" type="text" ng-model="app.lastName" placeholder="Enter your last name" required ng-minlength="3" ng-maxlength="20" />
Javascript:
$scope.form.lastName.$setValidity("sameName", false);
AngularJS form validation relies on the name of the form and the name of the fields to find the validation models on scope.
For example, if your HTML is:
<form name="form">
<input name="firstName" ng-model="firstName" />
</form>
You will be able to access the validation $error property on scope using the name attributes:
$scope.form.firstName.$error.sameName
To fix the issues you're having, add a name attribute to your input fields.
JSBin Demo
I'm trying to update a database from a form without using any php, I'm using angularjs with MySql
If I use the following with the put method I can insert a user into the data base, I've
http://localhost:8080/CyberSolution/rest/user/register?u=tester&pw=fred&fname=Fred&lname=Smith&email=fred#localhost.com
I've made a basic html form
<form method="POST" action="">
Username: <input type="text" name="username" size="15" /><br />
Password: <input type="password" name="password" size="15" /><br />
email: <input type="text" name="email" size="15" /><br />
First name: <input type="text" name="first_name" size="15" /><br />
Last name: <input type="text" name="lirst_name" size="15" /><br />
<p><input type='submit' name='Submit' value='Submit' /></p>
</form>
I'm working with AJS for the first time and also REST for the first time, I'm unsure on how to link the form to the database to update. I'm unsure what needs to go in the controllers.js as well
Thanks
You could simply use the $http service.
First use ng-model to store fields value in an object :
<form ng-submit="send_form()" action="">
Username: <input type="text" name="username" size="15" ng-model="form.username" /><br />
Password: <input type="password" name="password" size="15" ng-model="form.password"/><br />
email: <input type="text" name="email" size="15" ng-model="form.email"/><br />
First name: <input type="text" name="first_name" size="15" ng-model="form.first_name"/><br />
Last name: <input type="text" name="lirst_name" size="15" ng-model="form.last_name"/><br />
<p><input type='submit' name='Submit' value='Submit' /></p>
</form>
And then use in your controller (or even better, through a service) :
function myController($scope, $http) {
$scope.send_form = function () {
$http.put('http://localhost:8080/CyberSolution/rest/user/register', $scope.form).success(successCallback);
}
}
We have a somewhat complicated model on an AngularJS controller:
function controller($scope) {
$scope.model = {
childmodel1: {
childmodel2: {
property1: 'abc',
property2: 3,
property3: 0.5,
property4: 'abc'
}
}
}
}
In the HTML markup, we don't want to repeat the whole access chain everytime we access childmodel2:
<div ng-controller="ctrl">
<div>
<input type="text" ng-model="model.childmodel1.childmodel2.property1" />
<input type="text" ng-model="model.childmodel1.childmodel2.property2" />
<input type="text" ng-model="model.childmodel1.childmodel2.property3" />
<input type="text" ng-model="model.childmodel1.childmodel2.property4" />
</div>
</div>
Is there an AngularJS directive that creates a sub-scope like this:
<div ng-controller="ctrl">
<div ng-unknowndirective="model.childmodel1.childmodel2">
<input type="text" ng-model="property1" />
<input type="text" ng-model="property2" />
<input type="text" ng-model="property3" />
<input type="text" ng-model="property4" />
</div>
</div>
It's the same thing that's done on ng-repeat, but without the repetition :)
We tried ng-scope, ng-controller, ng-model, none of them works this way. Googling didn't yield any results, we don't know the terminology to search for.
Thank you #Ufuk, here's my solution:
mt.directive('subscope', function () {
return {
scope: {
subscope: '='
}
};
});
and
<div ng-controller="ctrl">
<div subscope="model.childmodel1.childmodel2">
<input type="text" ng-model="subscope.property1" />
<input type="text" ng-model="subscope.property2" />
<input type="text" ng-model="subscope.property3" />
<input type="text" ng-model="subscope.property4" />
</div>
</div>
You can use ng-init to suppress the access chain
<div ng-init="childmodel2 = model.childmodel1.childmodel2">
<input type="text" ng-model="childmodel2.property1" />
<input type="text" ng-model="childmodel2.property2" />
<input type="text" ng-model="childmodel2.property3" />
<input type="text" ng-model="childmodel2.property4" />
</div>
It creates alias model. More appropriate you create the alias in your controller like
$scope.childmodel2 = $scope.model.childmodel1.childmodel2 // and remove ng-init from HTML
Demo