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>
Related
Try to click on the word Snacks.
<div hidden>
<form action = "/Test/Index1" method = "post">
<div class="row">
<label for="Snacks">Snacks</label>
<input type="checkbox" id="Snacks">
</div>
</form>
</div>
<div>
<form action = "/Test/Index2" method = "post">
<div class="row">
<label for="Snacks">Snacks</label>
<input type="checkbox" id="Snacks">
</div>
</form>
</div>
On click of that label it will check the 1st checkbox with the id="Snacks", which is inside the hidden div.
To know how it is working remove the hidden attribute of the first div and try it.
You cannot define two id="Snacks" attribute in same page.
You can do something like this
Try to click on the word Snacks.
<div>
<form action = "/Test/Index1" method = "post">
<div class="row">
<label for="Snacks_1">Snacks</label>
<input type="checkbox" id="Snacks_1" name="Snacks">
</div>
</form>
</div>
<div>
<form action = "/Test/Index2" method = "post">
<div class="row">
<label for="Snacks_2">Snacks</label>
<input type="checkbox" id="Snacks_2" name="Snacks">
</div>
</form>
</div>
i have a problem with angulare code. I have made a small form structure with ng reapet . When i removed one of element every element down of them are not show the "not valid" message . All up of them work fine but down of remove not showing info not given the false of this data-ng-show="Zhf.w{{key}}.$error.pattern" why ng show not taked false.
<form name="zhf" class="form-horizontal">
<div data-ng-repeat="(key, i) in vm.items.Info | limitTo: (vm.NumberOfDays)">
<div class="col-sm-3">
<input type="text" class="form-control" id="w{{key}}" name="w{{key}}" ng-model="vm.item[key].w" placeholder="0" ng-pattern="/^[0-9]{1,10}([,.][0-9]{1,2})?$/" required>
<p style="color: #a94442" class="text-danger" data-ng-show="Zhf.w{{key}}.$error.pattern">
<span>Not a valid number!</span>
</p>
</div>
<div class="col-sm-2">
<button type="button" class="btn btn-danger btn-sm " ng-click="vm.delete(key)">remove</button>
</div>
</div>
</form>
vm.delete = function(index) {
vm.items.Info.splice(index, 1);
vm.item.splice(index, 1);
vm.NumberOfDays -= 1;
}
I have updated your ng-repeat section to validate form and sample is HERE
<form novalidate="novalidate" name="inputValidate">
<div ng-repeat="field in fields.test">
<div style="width:600px">
<div ng-form name="validMe" style="width:58%;float:left">
<input id="input{{$index}}" name="input{{$index}}" type="text" ng-model="field.value" ng-pattern="/^[0-9]{1,10}([,.][0-9]{1,2})?$/" required>
<span style="color: #a94442" ng-show="validMe['input\{\{$index\}\}'].$error.pattern">Not a valid number!</span>
<span style="color: #a94442" ng-show="validMe['input\{\{$index\}\}'].$error.required ">Number Required!</span>
</div>
<div style="width:20%;float:left">
<input type="button" value="Remove" ng-click="delete($index)"/>
</div>
</div>
</div>
</form>
I have a classic form that submits data to a controller. Nothing special until here.
The thing is I want a second button, let's say "Save and Exit" that I want to also submit and redirect to home page.
How could I do that? I guess this includes a little javascript for checking?
I just can't wrap my head around it. Thank you!
<form method="POST" action="link/here" id="main_form" class="form-horizontal">
<input name="_token" value="JDtRMqc4aRFlK4QFzDPRTxKvNxIj5EnoLOceOUBT" type="hidden">
<div class="box-body">
<div class="form-group">
<label for="url" class="col-sm-3 control-label">Figura</label>
<div class="col-sm-9">
<input class="form-control" id="Figura" name="figura" placeholder="Figura" value="" type="text">
</div>
</div>
<div class="form-group">
<label for="url" class="col-sm-3 control-label">Parcela</label>
<div class="col-sm-9">
<input class="form-control" id="Parcela" name="parcela" placeholder="Parcela" value="" type="text">
</div>
</div>
<div class="form-group">
<label for="url" class="col-sm-3 control-label">Rand</label>
<div class="col-sm-9">
<input class="form-control" id="Rand" name="rand" placeholder="Rand" value="" type="text">
</div>
</div>
<div class="form-group">
<label for="url" class="col-sm-3 control-label">Nr. Locuri</label>
<div class="col-sm-9">
<input class="form-control" id="Locuri" name="locuri" placeholder="Locuri" value="" type="text">
</div>
</div>
<div id="locuri_div" class="col-sm-offset-1"></div>
<div class="pull-right">
<button type="submit" class="btn btn-success">Salveaza</button>
</div>
<div class="pull-left">
Inapoi
</div>
</div>
<!-- /.box-body -->
</form>
your current button :
<button type="submit" name="check" value="0" class="btn btn-success">Save</button>
add a new one:
<button type="submit" name="check" value="1" class="btn btn-success">Save and Exit</button>
then in your save.php do:
if($_POST['check'] == 0){
//redirect to page
}
else{
//redirect to home
}
Give each button a name and a value. In your controller (client-side JS is the wrong tool for this), test the name and then redirect based on that.
For example:
<button name="action" value="save">Save</button>
<button name="action" value="save_and_go_home">Save & Go Home</button>
And then (to use expressjs as an example):
app.post('/here', function (req, res) {
// Do everything else you want to do with the data
// Then
var action = req.body.action;
if (action === "save_and_go_home") {
res.redirect("/");
} else {
res.send('Whatever you were sending before')
}
});
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
In an application using BootstrapValidator, I have this form :
<form method="post" action="save.php" role="form" id="form" class="form-horizontal">
<div class="children-list col-sm-12">
<div class="child col-sm-12">
<div class="col-sm-12">
<div class="form-group">
<label class="col-sm-4 control-label" for="guest">Option 1</label>
<div class="col-sm-4">
<div class="radio">
<label>
<input type="radio" data-bv-notempty="true" data-bv-notempty-message="test" name="guest[1][member_ski]" value="0"> Yes
</label>
</div>
<div class="radio">
<label>
<input type="radio" data-bv-notempty="true" data-bv-notempty-message="test" name="guest[1][member_ski]" value="1"> No
</label>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="button" href="#" class="btn btn-sm btn-default add-child">Add a child</button>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<input type="submit" class="btn btn-sm btn-default" value="Send"/>
</div>
</div>
</form>
And this Javascript :
$(document).ready(function() {
$('form').bootstrapValidator().on('click', '.add-child', function() {
list = $('.children-list')[0];
first = $(list).find('.child:first');
clone = $(first).clone();
$.each(clone.find('input'), function(_, input) {
$(input).attr('name', 'guest[2][member_ski]');
$(input).attr('data-bv-field', 'guest[2][member_ski]');
});
$(list).append(clone);
$('form').bootstrapValidator('addField', clone);
});
$('.btn.remove-child').hide();
});
When I click on the button to add a new child, and I submit the form, the first validation is working but not the second. Is there a wat to make it working both?
I ran into the same problem and noticed that when the Validator enriches the fields during the add, the DOM node wasn't reflecting it. The fix was to replace each field I added with the changes that the validator had added
_.each($(":input", html), function(field){
this.validator.addField($(field));//where this.validator is the BootStrapValidator Instacne
$("#"+$(field).prop("id")).replaceWith(field);
}, this);