Develop Reference

Dynamically set form name in ng-messages

Within multiple forms in my app, I am trying to use the same directive which is an email input field complete with validation (it sources its value from a list of recently used emails but that is not pertinent to this question). Because the form in which the directive is used is different depending on where I use it, the ng-messages attribute needs to be dynamically rendered.
I have managed to get ng-messages to dynamically set itself, but it is not working as expected. Here is the code:
form.html
<form name="joinForm">
<rt-recents-menu ng-model="vm.roomName"/>
</form>
directive.coffee
recents = angular.module 'rtRecents', ['ionic', 'ngMessages']
.factory('rtRecentsService', require './recentsService')
.directive('rtRecentsMenu', (rtRecentsService, $ionicActionSheet) ->
restrict: 'E'
template: require './recentsMenu.html'
scope:
ngModel: '=?'
require: ['?ngModel', '^form']
transclude: false
replace: false
link: (scope, element, attrs, ctrls) ->
ngModel = ctrls[0]
formCtrl = ctrls[1]
scope.formName = formCtrl.$name
module.exports = recents.name
directive.html
<div class="email-line">
<input type="email"
name="roomName"
required
ng-model="ngModel"
ng-keydown="onKeyDown()"/>
<div id="email-error-messages" ng-messages="{{formName}}.roomName.$error" multiple role="alert">
<div ng-message="required" class="warn" translate>VALIDATION.EMAIL_REQUIRED_ERROR</div>
<div ng-message="email" class="warn" translate>VALIDATION.EMAIL_INVALID_ERROR</div>
</div>
</div>

In my case, I have a that displays each of the returned rows from a db query. And each row had its own form within this repeat loop.
I ran into two problems:
The ngMessage errors didn't display correctly because they didn't seem to be tied to the right fields/form.
I couldn't disable the "save" button per-form. The $invalid didn't seem to work.
Here's what works (trimmed decorators, etc so you only see the essential points):
<div ng-repeat="row in rows | orderBy: 'sortBy'"
ng-init="formName = 'siteEdit' + row.id">
<form name="{{formName}}" ng-submit="view.startSave(row.id)">
<!-- I have "control" buttons at the top of my form to save, cancel, etc. here are the two related to saving -->
<span class="glyphicon glyphicon-save pull-right q-palette-color-2" ng-disabled="view.isPageBusy()"
ng-show="! this[formName].$invalid" ng-click="view.startSave(row.id)" title="Save"/>
<span class="glyphicon glyphicon-ban-circle pull-right q-palette-accent-2"
ng-show="this[formName].$invalid" style="padding-left:10px;cursor: pointer; cursor: hand;" data-toggle="tooltip" title="Correct Errors To Save"/>
<label for="siteName{{row.id}}"> Name:</label>
<input id="siteName{{row.id}}"
class="form-control input"
type="text"
placeholder="name"
ng-disabled="view.isPageBusy()"
ng-model="row.name"
name="name"
required />
<div ng-messages="formName.name.$error">
<div ng-message="required">This field is required</div>
</div>
.....
</form>
</div>
Key points:
ng-init in the ng-repeat builds the formName variable.
form validation for save/etc uses this[formName].$invalid
Field validation is referenced in the format of formName..$error
Something to note:
I couldn't get the ng-disable to actually disable the "button" based on it being invalid or not (the ng-click executed no matter what, maybe because I didn't use <button> but used <span> w/ glyphicon). So I opted to have one displayed when you can save, the other displayed when you can't. Works better this way since the person can visually see they can't save, and if they hover over they'll see they need to correct the form first.

ngMessages not working correctly with nested input

I have an input field that is nested within another <div> element, and I am trying to use ngMessages on that inside input field, but I can't seem to get it to validate correctly.
<div class="form-group" ng-model="object.idnumber" ng-hide="condition.userObjectsHidden">
<label class="form-control-label col-lg-12">ID Number</label>
<div class="col-lg-12">
<input type="text" name="idnumber" placeholder="111001111"
ng-model="user.idnumber"
ng-pattern="idpattern"
class="form-control input-lg"
required="required"></input>
<div ng-messages="idnumber.$error" ng-if="idnumber.$dirty">
<p ng-message="pattern">You are wrong!</p>
</div>
</div>
</div>
I'm not sure if it matters in terms of functionality where the <div ng-messages...> tag is, but I have also tried having it completely outside of this element with the same results. If I understand Angular and ngMessages correctly, I need to assign ng-messages to a directive--$error in this case--that I get to by dot-walking across name assignments. As far as I know, I have done this with idnumber.$error, although to be fair, I have also tried a more extensive dot-walk by using kiosk-form.uin.$error, where kiosk-form is the name of the entire form.
I have tried both ng-message="pattern" as well as ng-message="required". Also, just for clarity, idpattern is defined in my Javascript file as a regex string. It is defined correctly.

Rename your form as kioskFormand then ng-messages ="kioskForm.idnumber.$error"

Angular validators and ng-maxlength use

I've got the following div, which I want to add the bootstrap's class "has-error" if the input length is over 50 characters. This is the HTML:
<div class="form-group" ng-class="{has-error:[formData.titulo.$error]}">
<label for="inputTitulo">Título</label>
<input type="titulo" class="form-control" id="inputTitulo"
maxlength="50" ng-maxlength="50" ng-model="formData.titulo">
</div>
How can I make this work? I guess when you reach 50 characters, ng-maxlength throws a error, like the $error object, but I have no clue on what object is, how to access it, and if I have to do some more work in the controller or directive.
Any help here? I can't find any "easy" info regarding this issue and Angular validators.
edit 1:
I've seen all your responses, learned something new thanks to you, but this is still somehow not working. It currently is this way:
<div class="form-group" ng-class="{'has-error': formData.titulo.$error.maxlength}">
<label for="inputTitulo">Título</label>
<input type="titulo" class="form-control" id="inputTitulo" maxlength="50" ng-maxlength="50" ng-model="formData.titulo">
</div>
Also tested checking the length directly, as one of you suggested. But none of these solutions seem to work: it never adds the has-error class. Why?

To have the errors published on the scope, a form directive is required.
<div ng-form="form1" ng-class="{'has-error': form1.text1.$error.maxlength}">
<input name="text1" ng-model="formData.foo" ng-maxlength="50">
</div>
(Notice that the above uses the name attribute of the input to publish the form data - really, the ngModelController - on the scope)
So, the above works, and it's preferable if you do form validation. But, if you just need to check the length of some input, you don't have to use form validation - you could just check the model directly:
<div ng-class="{'has-error': formData.foo.length > 50}>
<input ng-model="formData.foo">
</div>

as you are using ng-model to make validations ,, this class ng-invalid will be added to your input
docs : https://docs.angularjs.org/api/ng/directive/ngModel
to use $error you need to access it using forms and names not ng-model ,, and the ng-class should be bound to the $error.maxlength not $error only
tutorial : https://scotch.io/tutorials/angularjs-form-validation

If you use the maxlength, a user will never be able to enter more characters than that, so you will never get the ng-maxlength error. It doesn't make sense to use maxlength and ngMaxlength together IMHO.
See the example on docs.angularjs.org/api/ng/directive/ngMaxlength (open the example in plunker and add maxlength attribute)

Angular Custom Validation of Nested Attributes

I have an Angular-based form for which I want to apply specific validation:
<form name="createProject" novalidate>
<span ng-show="createProject.projectName.$invalid">Please enter a name for the project.</span></br>
<input type="text" ng-model="newProject.project.name" name="projectName" placeholder="Project Name" required>
<div ng-repeat="topic in newProject.project.topics_attributes">
<span>Topic {{$index + 1}}</span>
<input type="text" ng-model="topic.name" placeholder="Topic Name">
<input type="text" ng-model="topic.feed_size">
<div ng-repeat="topic_source in topic.topic_sources_attributes">
<span>Topic {{$parent.$index + 1}} Source {{$index + 1}}</span>
<select ng-model="topic_source.platform" ng-options="platform for platform in platforms" topic-source-required parent="$parent.topic.name">
<option value="">-- platform --</option>
</select>
<input type="text" ng-model="topic_source.keywords" placeholder="Topic Keywords" topic-source-required parent="$parent.topic.name">
<button ng-show="$last" ng-click="addTopicSource($parent.topic)">Add Topic Source</button>
</div>
</div>
<button ng-click="addTopic()">New Topic</button>
<input type="submit" ng-click="addProject()" ng-class="{ disabled: createProject.$invalid }" ng-disabled="createProject.$invalid" value="Add Project">
</form>
Back
In the form, a project can have either zero or multiple topics. Each topic must have at least one topic source. Basically, I want to create validation that checks if a topic is being added (added being defined as having a name) and if so require that it has at least one topic_source with platform and keyword fields entered associated with it.
Is this even possible? I'm not very familiar with Angular custom validation so I'm not sure how to begin implementing something like this.
**Edit**
Current progress on custom validation directive:
angular.module('dashboard').directive 'topicSourceRequired', ($parse) ->
require: "ngModel"
link: (scope, elem, attrs, ctrl) ->
topicName = $parse attrs.parent
scope.$watch topicName, (topicName) ->
ctrl.$parsers.unshift checkForExistence if topicName
checkForExistence = (topicSource) ->
if topicSource
ctrl.$setValidity "topicSourceRequired", true
else
ctrl.$setValidity "topicSourceRequired", false
topicSource
Ok, getting closer for this validation. Right now the validation seems to be checking if the two topic_source fields have values independent of whether or not the parent's name field has a value, AND the topic_source fields only register as invalid if a field has been entered and then erased.
How do I make sure the checkForExistence function is only called when topicName has a non empty string value? Second, how do I make sure blank fields are invalid without having to modify them somehow?

You need to create a custom directive that requires ngModel which gives you access to the ngModelController (look at the require option when creating a directive).
Basically, you can listen for changes to the value by registering with the $viewChangeListeners, read the current value from $viewValue, and set the validation through the controller function
$setValidity(validationErrorKey, isValid);
The validationErrorKey you set is the a boolean value on the $erros object of the controller.
Take a look at this page in the docs to get you going:
https://docs.angularjs.org/api/ng/type/ngModel.NgModelController

angular ng-model transclude transfer

I am trying to create custom elements which will convert my form elements to match bootstrap's form styling structure
Basically,
<my-input ng-model="myname">
should become
<div class="form-element">
<input ng-model="myname" />
</div>
The problem is that when I use transclude, the ng-model goes to the root element and the resulting DOM is
<div class="form-element" ng-model="myname">
<input>
</div>
Is it possible to choose which inner element the ng-model attribute is transferred to??
If I create another directive called my-model and use it instead of ng-model, how can I transfer this to the inner input element?
<my-input my-model="myname">
should become
<div class="form-element">
<input ng-model="myname" />
</div>

I think it is unnecessary to use ng-transclude here, you can simply have directive
<my-input model="myname">
and directive template
<div class="form-element">
<input ng-model="model" />
</div>
where directives scope is
scope: {
'model': '='
}
By using this you can have couple of models in directive and you can put them wherever you want.

Yes. I ran into this issue a little while ago.
You need to bind your ng-model as a property of an object such as.
<div class="form-element">
<input ng-model="user.myname" />
</div>
And in controller, make sure you do this.
$scope.user = {};
In this way, angular would be able to find the ng-model.