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.
Related
Hello I am beginner of Angularjs and I want to build dynamic validations.Here is my code shortened as well as possible.
JS
$scope.inputValidates = [
{ 'name':'name',
'validate':'required',
},
{ 'name':'email',
'validate':'type = email',
}]
HTML
<div ng-repeat="vitem in vm.inputValidates">
<input name={{vitem.name}} ng-model="vm.useraccount[vitem.name]" {{item.validate}}>
</div>
I want this input result as
<input name=name ng-model="vm.useraccount[vitem.name] required>
<input name=name ng-model="vm.useraccount[vitem.name] type = email>
Thanks for taking time for this.
Use ng-required:
<div ng-repeat="vitem in vm.inputValidates">
<input name={{vitem.name}} ng-model="vm.useraccount[vitem.name]" ng-required="item.validate">
</div>
By the way, I see you assigned inputValidates to your $scope. So you should be accessing it in your view by inputValidates, not vm.inputValidates.
Sample is HERE
Sample contains both required and pattern validation applied on textbox rendered using ng-repeat and use ng-switch based on your validation type
<div ng-repeat="field in fields">
<div style="width:600px">
<div ng-form name="validMe" style="width:58%;float:left" ng-switch="field.validationType">
{{field.name}} :
<div ng-switch-when="required">
<input id="input{{$index}}" name="input{{$index}}" type="text" ng-model="field.value" required>
<span style="color: #a94442" ng-show="validMe['input\{\{$index\}\}'].$error.required ">Field Required!</span>
</div>
<div ng-switch-when="email">
<input type="email" id="input{{$index}}" name="input{{$index}}" ng-model="field.value" ng-pattern="/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+#[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/">
<span style="color: #a94442" ng-show="validMe['input\{\{$index\}\}'].$error.pattern">Not a valid email!</span>
</div>
</div>
</div>
</div>
I have a set of form directives in which duplicate code can be extracted into a separate directive.
I know that I can use transclusion, but have not been able to identify any technique that allows this (element cloning or passing functions). Tutorials on pluralsight, sitepoint and few other describe extraction into a directive inside the current directive, but I have not been able to apply them to my use case.
Brief Synopsis:-
Two sample directives
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
<div class="form-group">
<label ng-show="visible">Input:
<input ng-model="person.name" type="text" required>
</label>
<p ng-show="!visible"> {{person.name}} </p>
</div>
</div>
And
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
<div class="form-group">
<label ng-show="visible">Input:
<select> <option value="volvo">Volvo</option> .... </select>
</label>
<p ng-show="!visible"> {{person.name}} </p>
</div>
</div>
I wish to condense them into directives like
<my-input-box ng-model="person.name" required></my-input-box>
<my-select-box options = "person.options"></my-select-box>
where my-input-box template is
<my-wrapper-box><input ng-model="person.name" type="text" required></my-wrapper-box>
and my-select-box template is
<my-wrapper-box><select>......</select></my-wrapper-box>
Please see this plunker: http://plnkr.co/edit/k6LWjn?p=preview
How do I extract the wrapper box so that 2-way binding is maintained with the ng-model and overriding attributes like required, bootstrap classes, validation regex, etc. in either the my-wrapper-box or the transcluded HTML element?
Many thanks to all who have read the question. I look forward to your suggestions.
Plunker.
I've added the following to myInputBox directive:
controller: function(){},
bindToController: true,
controllerAs: 'ctrl',
and changed the html to
<my-wrapper-box>
<input type="text" ng-required="reqd" ng-model="ctrl.value" />
</my-wrapper-box>
I was hoping someone could tell me what I was doing wrong with the ngMessages directive. The code I am using is:
<script type="text/ng-template" id="error-messages">
<div ng-message="required">This field is required</div>
<div ng-message="minlength">This field is too short</div>
</script>
<div ng-controller="SomeController">
<div class="row">
<div class="col-md-6">
<form name="profileForm" ng-submit="model.submit()" novalidate>
<div>
<label for="username">Your user name:</label>
<input type="text" id="username" name="username" required placeholder="User name" ng-model="model.user.username">
<div class="help-block" ng-messages="profileForm.username.$error">
<div ng-messages-include="error-messages"></div>
</div>
</div>
<button>submit</button>
</form>
</div>
</div>
</div>
And I created a plunk here ng-messages-include plunk
Been at this for hours.
Thanks
ngMessages does not ship with angular by default. So, when you add ng-messages directive, angular doesn't compile it and nothing happens.
What you should do is add ng-messages to a script tag and add the module ngMessages in your app definition.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-messages.min.js"></script>
var anApp = angular.module('anApp', ['ngMessages']);
See the updated plunker: http://plnkr.co/edit/1CtamfeVCpggDApH9Enp?p=preview
I am trying to iterate the radio buttons using ng-repeat. All the radio buttons are visible perfectly with first radio button checked, but when I try to select the other radio buttons, radio buttons are not clickable. can anybody please help me out what I am missing here..!!
<div class="form-group form-radio" ng-repeat="n in [0,1]">
<div class="col-sm-12">
<div class="radio padding-bottom20">
<input class="form-input" type="radio" id="rb4" name="optionsRadiosA" value="option4" checked="">
<label class="form-label" for="rb4">{{n}}</label>
</div>
</div>
</div>
corrected html
<div class="form-group form-radio" ng-repeat="n in [0,1]">
<div class="col-sm-12">
<div class="radio padding-bottom20">
<input class="form-input" type="radio" id="rb4_{{n}}" name="optionsRadiosA" value="{{n}}" checked="">
<label class="form-label" for="rb4_{{n}}">{{n}}</label>
</div>
</div>
</div>
<div class="form-group form-radio" ng-repeat="n in [0,1]">
<div class="col-sm-12">
<div class="radio padding-bottom20">
<input class="form-input" type="radio" id="rb4_{{$index}}" name="optionsRadiosA" ng-model="radioVal[$index]">
<label class="form-label" for="rb4_{{$index}}">{{n}}</label>
</div>
</div>
</div>
I have added ng-model="radioVal_{{$index}}" in each of input iteration, why because it's ng-model who will contain current ng-value of your radio buttons. Try it, and get back to me.
and Id's are dynamically generated now.
Working Now!!!!!!
You need to fix the following issues:
The model must exist in parent scope. To do this, use ngInit to initialize an ngModel outside of your ngRepeat: ng-init="selected = { number:0 }"
All radio button controls must bind to the same ngModel. Add an ngModel to your input control, and bind it to the ngModel that you declared in parent scope: ng-model="selected.number"
Display different values for each radio button: value="{{n}}"
NOTE: Remember, ngRepeat creates a child scope for each iteration.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-init="selected = { number:0 }">
<div class="form-group form-radio" ng-repeat="n in [0,1]">
<div class="col-sm-12">
<div class="radio padding-bottom20">
<input class="form-input" ng-model="selected.number" type="radio" value="{{n}}">
<label class="form-label" for="rb4">{{n}}</label>
</div>
</div>
</div>
{{ selected }}
</div>
You should have different ng-model for each radio element, you could do it by using ng-model="radio[$index]"
Markup
<div class="form-group form-radio" ng-repeat="n in [0,1]">
<div class="col-sm-12">
<div class="radio padding-bottom20">
<input class="form-input" type="radio" id="rb4-{{$index}}" name="optionsRadiosA" ng-value="option4" ng-model="radioVal">
<label class="form-label" for="rb4">{{n}}</label>
</div>
</div>
</div>
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.