Here is my HTML:
<form role="form" ng-submit="submit()">
<div class="form-group">
<div class="radio" ng-repeat="answer in answers">
<label>
<input type="radio" name="answer" ng-model="submittedAnswer" value="{{$index}}" /> {{ answer }}
</label>
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">Далее</button>
</div>
</form>
And in angular controller I have this code:
$scope.submittedAnswer = 0;
$scope.submit = function () {
answers.push($scope.submittedAnswer);
console.log($scope.submittedAnswer);
}
On submit I'm always getting 0. It seems that problem only about radiobutton. I've tried to bind model to simple text input and all worked fine. Any suggestions? BTW, is there any way to avoid initializing of model (I don't want any radiobutton to be checked initially)?
You have to use $parent inside the ng-repeat model to bind your model.
var myapp = angular.module('myApp',[]);
myapp.controller('myController', function($scope){
$scope.answers = ['One','Two','Three'];
$scope.submit = function(){
console.log($scope.submittedAnswer);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="myController">
<form role="form" ng-submit="submit()" ng-init="submittedAnswer = 0">
<div class="form-group">
<div class="radio" ng-repeat="answer in answers">
<label>
<input type="radio" name="answer" ng-model="$parent.submittedAnswer" value="{{$index}}" /> {{ answer }}
</label>
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">Далее</button>
</div>
</form>
</div>
</div>
This is the exact reading you need to understand why. https://github.com/angular/angular.js/wiki/Understanding-Scopes#javascript-prototypal-inheritance
Related
I'm not able to display correctly the json data.
How can I display The radio buttons from my json file (plunker demo)?
Aslo I'd like to validate the form, on submit.
html:
<my-form ng-app="CreateApp" ng-controller="mainController">
<form ng-submit="submitForm()" novalidate>
<fieldset>
<div ng-repeat="field in result.fields">
<label for="{{field.type}}">{{field.label}}</label>
<input
ng-required="{{field.required}}"
value="{{options.value}}"
type="{{field.type}}" >
<form-error ng-show="{{field.errorMessages.required}}"></form-error>
<form-error ng-show="{{field.errorMessages.invalid}}"></form-error>
</div>
</fieldset>
<button type="button" ng-click="onValidate(); return false;"> Validate</button>
<button type="submit" ng-disabled="userForm.$invalid"> Submit </button>
</form>
</my-form>
Initiate a value on controller first
$scope.richestClub = {};
$http.get('form.json').success(function(response) {
$scope.result = response;
var fields = response.fields;
$scope.richestClub.val = fields.answer.options[0].value;
console.log($scope.richestClub);
console.log($scope.fields);
});
Html:
<form ng-submit="submitForm()" novalidate>
<fieldset>
<div ng-repeat="field in result.fields">
<label for="{{field.type}}">{{field.label}}</label>
<input ng-if="field.type != 'radio'" ng-required="{{field.required}}" value="{{options.value}}" type="{{field.type}}">
<div ng-if="field.type == 'radio'">
<div ng-repeat="option in field.options">
<input type="{{field.type}}" ng-model="richestClub.val" value="{{option.value}}">{{option.label}}</br>
</div>
</div>
<form-error ng-show="{{field.errorMessages.required}}"></form-error>
<form-error ng-show="{{field.errorMessages.invalid}}"></form-error>
</div>
</fieldset>
<button type="button" ng-click="onValidate(); return false;"> Validate</button>
<button type="submit" ng-disabled="userForm.$invalid"> Submit </button>
</form>
Here's how you can iterate over the radio options. I agree with #charlietfl that you should use an Angular form library like angular-formly instead.
<fieldset>
<div ng-repeat="field in result.fields">
<div ng-if="field.type === 'radio'">
<span>{{field.label}}</span>
<div ng-repeat="option in field.options">
<label for="{{option.label}}">{{option.label}}</label>
<input ng-required="{{field.required}}"
value="{{options.value}}"
id="{{options.label}}"
type="{{field.type}}" >
</div>
</div>
<div ng-if="field.type !== 'radio'">
<label for="{{field.type}}">{{field.label}}</label>
<input ng-required="{{field.required}}"
value="{{options.value}}"
type="{{field.type}}" >
</div>
<form-error ng-show="{{field.errorMessages.required}}"></form-error>
<form-error ng-show="{{field.errorMessages.invalid}}"></form-error>
</div>
</fieldset>
Is there a way in angular js to push a list of managers(or any item) to an array with validation in angular. I basically want to create an array as the ng-model and still validate it. Is this possible to do or am i going about it the wrong way?
var app = angular.module("FormTest",[]);
app.controller("AppCtrl", ["$scope", function($scope){
var appCtrl = this;
appCtrl.appName = "Form Array";
$scope.managers = [""];
$scope.form = {};
$scope.form.managers = $scope.managers;
$scope.addManager = function(){
$scope.managers.push('');
}
$scope.removeManager = function(index){
if($scope.managers.length > 1){
$scope.managers.splice(index, 1);
}
}
}])
angular.element(document).ready(function(){
angular.bootstrap(document.querySelector('html'), ["FormTest"]);
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div ng-controller="AppCtrl as app">
<h2>{{app.appName}}</h2>
<div>
{{form.managers}}
<div>
<div>{{managers}}</div>
<div class="btn btn-primary" ng-click="addManager()">add manager</div>
</div>
</div>
<form novalidate name="form">
<div class="form-group" ng-repeat="item in managers track by $index">
<div class="row-fluid">
<div class="col-md-5">
<input type="text" ng-model="managers[$index]" ng-pattern="/\w{3,}/" required class="form-control">
</div>
<div class="col-md-1">
<div class="btn btn-default">
<span class="glyphicon glyphicon-remove-circle" ng-click="removeManager($index)"></span>
</div>
</div>
</div>
</div>
</form>
</div>
In your example, all right, except for that of the regular expression.
Look at the example code jsfiddle.
<h2>{{app.appName}}</h2>
<div>
{{form.managers}}
<div>
<div>{{managers}}</div>
<button class="btn btn-primary" ng-click="addManager()">add manager</button>
</div>
</div>
<form novalidate name="form">
Form valid={{form.$valid|json}}
<div class="form-group" ng-repeat="item in managers track by $index">
<div class="row-fluid">
<div class="col-md-5">
<input type="text" ng-model="managers[$index]" name="manager{{$index}}" ng-pattern="/^\w{3,}$/" required class="form-control">
{{form['manager'+$index].$error}}
</div>
<div class="col-md-1">
<div class="btn btn-default">
<button class="glyphicon glyphicon-remove-circle" ng-click="removeManager($index)">Remove</button>
</div>
</div>
</div>
</div>
</form>
So I have an input form which looks like this
<div>
<div class="form-group">
<label for="inputQuestion" class="col-sm-2 control-label">Question</label>
<div class="col-sm-10">
<input data-ng-model="publication.question" type="text" class="form-control" id="inputQuestion" placeholder="Question">
</div>
</div>
<br>
<br>
<ul id="itemContainer">
</ul>
</div>
<button type="submit" data-ng-click=addItem() data-ng-click=currentid=currentid+2 class="btn btn-info">Add Item</button>
The add Item button adds items in the ul itemContainer using js code running on the controller what I want to do now is to bind the items in the itemContainer with an array attribute of the "publication" lets say "publication.options" how can I achieve that ?
In case you believe my approach is totally wrong I would appreciate other ways of achieving the same result !
Thanks for your help in advance !
I think the best way is to have an array of questions and push each time the new question inside
Controller
angular.module('MyApp', [])
.controller('MainController', [ '$scope', function($scope) {
$scope.publication = {
question: "Is it good ?",
options: []
};
$scope.addItem = function() {
$scope.publication.options.push($scope.inputQuestion);
}
}]);
View
<body ng-controller="MainController">
<div>
<div class="form-group">
<label for="inputQuestion" class="col-sm-2 control-label">Options</label>
<div class="col-sm-10">
<input data-ng-model="inputQuestion" type="text" class="form-control" id="inputQuestion" placeholder="Write here...">
<button type="submit" ng-click="addItem()" class="btn btn-info">Add Option</button>
</div>
</div>
<br>
<br>
<h1 class="col-sm-2">Question: {{publication.question}}</h1>
<hr/>
<ul ng-repeat="question in publication.options">
<li>{{question}}</li>
</ul>
</div>
</body>
Working example here
I am trying to dynamically add a form input in AngularJS every time the add button is clicked. However, with the code I have, it the input elements don't display at all. I simply see the "Post" button. If I remove the ng-repeat="ingredient in ingredients", the form displays (as expected). What am I doing wrong here?
Here is the specific code in index.ejs:
<form ng-model="recipe">
<div class="form-inline" ng-repeat="ingredient in ingredients">
<div class="form-group">
<input type="text" class="form-control" placeholder="Name" ng-model="ingredient.name"></input>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Quantity" ng-model="ingredient.quantity"></input>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Unit" ng-model="ingredient.unit"></input>
</div>
<div class="form-group">
<button type="button" id="add" ng-click="add()">Add</button>
</div>
</div>
<button type="submit" class="btn btn-primary">Post</button>
</form>
Here is the corresponding js code:
app.controller('MainCtrl', [
'$scope',
'posts',
'auth',
function($scope, posts, auth){
$scope.ingredients = [];
$scope.add = function() {
var newItemNo = $scope.ingredients.length+1;
$scope.ingredients.push({'id':'choice'+newItemNo});
};
}]);
That's because your button is in the ng-repeated element. ng-repeat repeats the HTML inside the element it is assigned to. Since you have no items in ingredients, nothing is rendered - including your button
Just move your button out of <div class="form-inline">.
Your add button is inside the ng-repeat, so it's never shown, so you can never populate the array, so it can't ever show. Does that make sense?
Try
<form ng-model="recipe">
<div class="form-inline" ng-repeat="ingredient in ingredients">
<div class="form-group">
<input type="text" class="form-control" placeholder="Name" ng-model="ingredient.name"></input>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Quantity" ng-model="ingredient.quantity"></input>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Unit" ng-model="ingredient.unit"></input>
</div>
</div>
<div class="form-group">
<button type="button" id="add" ng-click="add()">Add</button>
</div>
<button type="submit" class="btn btn-primary">Post</button>
</form>
I am pretty much beginner with AngularJS, and I am trying to submit a form, as follows:
<div ng-include="APP_URL + '/view/myResolver/searchForm.html'" ng-controller="MySearchFormController"> </div>
This is my searchForm.html:
<div class="container">
<div class="row">
<div class="col-md-14">
<div class="well">
<div class="col-md-9">
<form ng-submit="submit()" class="form-horizontal clearfix" role="form" >
<div class="form-group">
<label for="teamName" class="col-md-3 control-label">Team name</label>
<div class="col-md-9">
<input type="text" ng-model="myName" id="myName" class="form-control">
</div>
</div>
</div>
<div class="row">
<div class="col-md-0"></div>
<button ng-click="onFormReset()" class="btn btn-default">Reset</button>
<input type="submit" id="submit" class="btn btn-primary" value="Search"/>
</div>
</form>
{{teamName}}
</div>
</div>
</div>
UPDATE
Controller:
angular.module('MyApp')
.controller('MySearchFormController', ['$scope', function($scope){
$scope.submit = function (){
if ($scope.myName) {
alert($scope.myName);
$scope.teamName = this.teamName;
}
}
}]);
What is currently happening is the text is automatically appearing in the {{teamName}} field.
Instead, I would like to make it work only onSubmit(), namely clicking the Search button.
You can try like this :
function demo ($scope) {
$scope.submit = function () {
$scope.submitted = true;
};
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller="demo">
<form ng-submit="submit()">
<input type="text" ng-model="teamName">
<button>Submit</button>
</form>
<p ng-if="submitted">{{ teamName }}</p>
</div>
BUT it is not optimal, as once you submitted one time, $scope.submitted is true and you will get the same problem, again.
SO, I would recommend you to not bind your {{ teamName }} to the same reference as the input :
function demo ($scope) {
$scope.submit = function () {
$scope.teamNameCopy = angular.copy($scope.teamName);
};
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller="demo">
<form ng-submit="submit()">
<input type="text" ng-model="teamName">
<button>Submit</button>
</form>
<p>{{ teamNameCopy }}</p>
</div>
OK, the issue is resolved.
Unfortunately, that was an issue related to incorrectly closing html tags, and not