I have an AngularJS Modal Bootstrap form working. How do I style the text inside the form? In the example below, I'd like 'Name' to be Bold. I've tried label, divs, ng-class but that seems to get stripped out when Angular processes the form.
<form novalidate class="simple-form">
<div ng-class="col-sm-2 control-label">Code:</div> {{Code}}
<label>Name:</label> {{Name}}
<label>Our Name:</label><input type="text" ng-model="Our_Name" />
</form>
When I view the source it always comes out:
<form novalidate="" class="simple-form ng-scope ng-pristine ng-valid ng-binding">
Code: C11 Name: Accredited Surety Cas Co.
Our Name: <input type="text" ng-model="Our_Name" class="ng-pristine ng-valid"><br>
</form>
Thanks for looking.
I hope you have included bootstrap.css in your code. And for modal window you need to add modal specific classes like below.
<form novalidate>
<div class="modal-dialog simple-form">
<div class="modal-content">
<div class="modal-header">
//your rest html
</div>
</div>
</div>
</form>
Here is an updated fiddle.
I hope this is what you are looking for.
Thanks
Related
I'm new in AngulsrJS and I've got following code:
<form ng-if="editorCtrl.edit" class="form-horizontal" role="form" ng-submit="editorCtrl.saveEntry()">
<div class="form-group">
<div class="col-md-6" ng-repeat="(key,field) in editorCtrl.editEntry">
<label>{{key}}</label>
<input type="text" class="form-control" value={{field}} />
</div>
</div>
<!-- ng-model="editorCtrl.toSave[key]" ng-value="{{field}}" that part was in input attributes -->
<div class="form-group">
<div style="padding-left:110px">
<input type="submit" value="Update selected entry" ng-disabled="form.$invalid" class="btn btn-primary"/>
</div>
</div>
</form>
Now I need to obtain values from input fields. I tried to use ng-model="editorCtrl.toSave[key], but it's not working in a correct way.
Any suggestions how to resolve this situation ?
if you can consider no necesary the "toSave" object maybe you can use the 2-way data binding properly only using editEntry Object :
<input type="text" class="form-control" value={{field}} ng-model="editorCtrl.editEntry[key]"/>
In this way after a submit you will get editEntry with the fields modifieds (or not), here is an example
https://jsfiddle.net/pv8qrwty/1/
run the example and if you modified the fields after you press the submit button it will be displayed in your browser console
hope this help ! and sorry for my english !
If zipcode is empty then form is invalid so button is disabled but if zipcode is 2 digits error message is showing but form is showing as valid in controller. If zipcode is empty then I need to disable button but I'm checking form valid or not but dont worry about ng-disabled. I just need solution for showing the "div" if and only if form is valid.
function submitUserDetail (formValid) {
if(formValid) {
$scope.showDiv = true;
}
}
<div class="">
<div class="">
<label required>
Zip code required
</label>
<label pattern>
Invalid Zip code
</label>
</div>
<div class="">
<input type="tel" maxlength="5" class="" name="zip5"
ng-model="userDetail.zipCode" required=""
pattern="^\d{5}$"
data-validate-on-blur="true" value=""
size="5">
<span class="" title="Reset" onclick="jQuery(this).prev('input').val('').trigger('change');"></span>
</div>
</div>
<div class="">
<div class="">
<div class="">
<span class=""></span>
<button class="" href="#" id="button" ng-click="submitUserDetail(form.$valid)" ng-disabled="form.$invalid">See section</button>
<span class=""></span>
</div>
</div>
</div>
<div ng-if="showDiv">
.......
</div>
Thanks in advance.
I assume that you have a <form> wrapping the HTML provided.
If so, you should make sure your <form> tag has novalidate applied so you're using AngularJS form validation and not HTML5 form validation:
<form name="form" ng-submit="submitUserDetail(form.$valid)" novalidate>
Also, it looks like you're mixing HTML5 validation attributes with AngularJS validation attributes. You should be using ng-required and ng-pattern instead of required and pattern.
I have an AngularJS directive with multiple transclusions and one transclusion slot is wrapped by a form.
Everything is working fine except for the form validation messages.
The directive template:
<ng-form name="nbcardform" ng-submit="submit()" novalidate>
<ng-transclude ng-transclude-slot="back"></ng-transclude>
<div class="row">
<div class="col-xs-12">
<button type="submit">Save</button>
</div>
</div>
</ng-form>
Here is an example of the directive usage:
<nb-card>
<nb-card-back>
<input type="text" name="username" ng-model="vm.username" required>
<div ng-messages="nbcardform.username.$error" role="alert">
<div ng-message="required">Required field</div>
</div>
</nb-card-back>
<nb-card>
For some reason the expression nbcardform.username.$error is undefined.
Can someone help me with this?
You should be creating a subform in your directive as it's scope is (likely?) different and it has no idea what nbcardform is.
<nb-card ng-form="myDirectiveForm">
<nb-card-back>
<input type="text" name="username" ng-model="vm.username" required>
<div ng-messages="myDirectiveForm.username.$error" role="alert">
<div ng-message="required">Required field</div>
</div>
</nb-card-back>
<nb-card>
This will still wire in nicely and in the parent directive you could use something like this:
<ng-form name="nbcardform" ng-submit="submit()" novalidate>
<ng-transclude ng-transclude-slot="back"></ng-transclude>
<div class="row">
<div class="col-xs-12">
<button type="submit">Save</button>
</div>
</div>
{{ nbcardform.$valid }}
{{ nbcardform.myDirectiveForm.$valid }}
{{ nbcardform.myDirectiveForm.username.$valid }}
</ng-form>
Have you tried:
<div ng-messages="vm.username.$error" role="alert">
The transcluded content uses the outer scope unless you specify a different scope to the transclude function in your linking function. See "Providing your own Transclusion Scope" here. Note that once you do that, you may no longer be able to reference vm.
I have a simple page with validating the field, something like this:
employee.html and its validating the field but if I have added the same code and called the same page using ng-include the validating is not working
without ng-include validate works:
<form name="form" class="form-horizontal" ng-validate="create(data)" novalidate>
<div class="row">
<div class="col-xs-6">
<div class="form-group">
<label for="" class="col-xs-6 control-label">First Name:</label>
<div class="col-xs-6">
<input name="first_name" type="text" class="form-control" ng-model="data.first_name" placeholder="First name" ng-required="true">
<div class="alert alert-danger" ng-show="form.$submitted && form.first_name.$error.required">Enter first name.</div>
</div>
</div>
</div>
</div>
</form>
with ng-include validate does not works:
dashboard.html
<div class="container">
....................
..................
<ng-include src="employee.html"></ng-include>
</div>
my question is: how can I make the validation works within ng-include?
yes your $submitted is not working angular version 1.3. if you need to show the message if only form is submit then you can keep a variable to detect whether the form is submitted or not.
to do that
in controller test function
$scope.create = function(data) {
$scope.formSubmitted = true;
}
in validation message use formSubmitted instead of $submitted
<div class="alert alert-danger" ng-show="formSubmitted && form.first_name.$error.required">E..
here is the working Plunker
But if you are using angular 1.3 or later version
angular introduce a $submitted in angular 1.3.x and may be your trying with a older angular version, upgrading angular will solve your problem.
here is the Changes of the 1.3 - please check the
new feature: Add new $submitted state to forms
<div class="alert alert-danger" ng-show="form.$submitted && form.first_name.$error.required">Enter first name.</div>
here is the working plunker
You can use bootstrap validation in ui like that
<form name="personalinformation">
<label for="fname"> First Name<span style="color:red" ng-show="personalinformation.firstname.$error.required">*</span></label>
<input type="text" class="form-control" id="" placeholder="First Name" ng-model="PerInfo.FirstName" required name="firstname">
</form>
and if you validation by angular you can create validationFunction and ng-click pass the value of text or other element in controller.If input type is false then you cal fill value in ng-show="true"
Use <ng-form></ng-form> instead of <form></form>
All,
I am working on an AngularJS form and am trying to see how the ng-messages directive works with ng-messages-multiple. I can't seem to get it to pick up multiple errors. I expect to see both the required and minimum errors at the same time but for some reason I only see required, then minimum. I posted the HTML below. I have the ng-messages included using bower, the script call in my index.html page, and I am injecting into my app.js module as required.
I am using AngularJS v1.3.2 in this project.
<div class="panel panel-default">
<div class="panel-heading">
<h1>Validation Test Form</h1>
</div>
<div class="panel-body">
<form class="form" name="form" role="form" ng-submit="submit(form)">
<div class="row">
<div class="form-group" show-errors>
<label for="name">Name:</label>
<input
class="form-control"
type="text"
name="name"
ng-model="formModel.name"
minlength="5"
required/>
<div ng-messages="form.name.$error" ng-messages-multiple class="has-error">
<div ng-message="required">Required!</div>
<div ng-message="minlength">Minimum length is 5</div>
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<button class="btn btn-success" type="submit">Save</button>
</div>
</div>
</form>
</div>
<div class="panel-footer">
{{formError}}
</div>
</div>
Try to use ng-minlength instead minlength
<input
class="form-control"
type="text"
name="name"
ng-model="formModel.name"
ng-minlength="5"
required/>
instead
<input
class="form-control"
type="text"
name="name"
ng-model="formModel.name"
minlength="5"
required/>
EDIT
It is normal behaviour for ng-minlength directive, this directive validate only when we have not 0 size of input, entered a value it must be at least 5 characters long, but it's ok to leave the field empty, and, unfortunately, in anyway you don't achieve, that you want. I offer you to create your custom directive or see in direction ng-pattern directive with need behaviour, if you very want that showing two message.