I am trying to get number of rows from the text that gets inject into text area, for some reason I can't get textarea to initalize number of row, here's my code. What am I doing wrong?
<div class="form-group col-sm-12">
<textarea contenteditable="true"
rows="'iwofRecord.WhatHasBeenDone.split('\n').lenght'"
class="form-control form-control-plain"
ng-model="iwofRecord.WhatHasBeenDone"
placeholder="What Has Been Done">
</textarea>
</div>
rows is not an Angular attribute, wrap that in {{}} - you're also double quoting that attribute (and have length spelled wrong)
rows="{{iwofRecord.WhatHasBeenDone.split('\n').length}}"
.lengHT - there is a typo, it has to be .length
Related
I would like to achieve the behavior to restrict/limit users entr to only 10 numbers for ex:
Anyone know how to do this?
I do see that they have an attribute md-input-maxlength, but i am not able to get it work, or find an example.
Appreciate your inputs.
Extend from John Smith's answer, you can try
md-search-text-change="searchText = searchText.substring(0,10)"
I don't think there is currently an easy way to do it. However, as a hacky workaround you can use md-search-text-change and whenever the value is longer than X, you can just overwrite it with the first X characters of the value.
Example pen here
Keep in mind though, changing the text to a substring of it will cause another call for the text change event.
Combine 'md-maxlength' and 'maxlength'
eg.
input type="text" md-maxlength="512" maxlength="512"
Here's the working code:
<md-autocomplete flex=""
required
ng-init="searchText=''"
md-input-name="autocompleteAddField"
md-input-minlength="2"
md-input-maxlength="10"
md-no-cache="true"
md-selected-item="newE.add"
md-search-text="searchText"
md-items="item in vm.queryAddressSearch(searchText)"
md-item-text="item.address"
md-require-match=""
md-floating-label="Address">
<md-item-template>
<span md-highlight-text="searchText">{{item.address}}</span>
</md-item-template>
<div ng-messages="newEntityForm.autocompleteAddField.$error" ng-if="newEntityForm.autocompleteAddField.$touched">
<div ng-message="required">You <b>must</b> have a user address.</div>
<div ng-message="md-require-match">Please select an existing address.</div>
<div ng-message="minlength">Your entry is not long enough.</div>
<div ng-message="maxlength">Your entry is too long.</div>
</div>
</md-autocomplete>
You can use ng-maxlength="10". Here is an example. If the user type more than 10 characters then the form will be invalid. You can check this out.
<form name="form">
<input type="text" ng-model="model" id="input" name="input" ng-maxlength="10" />
<hr>
input valid? = <code>{{form.input.$valid}}</code><br>
model = <code>{{model}}</code>
</form>
I have an angularjs view with the following input field that is dependent on what organization the user is from..
<div class="form-group" ng-class="{'has-error': isDirtyAndInvalid(provisionVMForm.vmHostPrefix)}">
<label class="col-sm-2 control-label" for="vmHostPrefix">Host Prefix*</label>
<div class="col-sm-8">
<div ng-show="$root.sessionObj.org.name=='orgName1'>
<input id="vmHostPrefix" name="vmHostPrefix" class="form-control" type="text"
required="true"
ng-maxlength="12"
ng-minlength="12"
placeholder="Host Prefix"
ng-blur="setdirtyFromFocus(provisionVMForm.vmHostPrefix)"
ng-model="vmHostnamePrefix"/>
<div class="pull-left alert alert-danger form-validation-alert" role="alert"
ng-show="provisionVMForm.vmHostPrefix.$error.minlength ||
provisionVMForm.vmHostPrefix.$error.maxlength>
Host Prefix must be 12 characters long.
</div>
</div>
<div ng-show="$root.sessionObj.org.name=='orgName2'>
<input id="vmHostPrefix" name="vmHostPrefix" class="form-control" type="text"
required="true"
ng-maxlength="4"
ng-minlength="4"
placeholder="Host Prefix"
ng-blur="setdirtyFromFocus(provisionVMForm.vmHostPrefix)"
ng-model="vmHostnamePrefix"/>
<div class="pull-left alert alert-danger form-validation-alert" role="alert"
ng-show="provisionVMForm.vmHostPrefix.$error.minlength ||
provisionVMForm.vmHostPrefix.$error.maxlength>
Host Prefix must be 4 characters long.
</div>
</div>
</div>
</div>
What I need to do is identify what organization the user is currently in, and dependent the org, the hostname prefix input field can only be a certain length. Now, this works perfectly fine when I have just the first ng-show in my code. It correctly identifies the org name and the form complains if the input is less than or more than 12 characters. Whenever I add my second ng-show to identify my second organization.. my first organization form validation for org # 1 is not correct. The form only complains if the input IS 12 characters. I need it to be the opposite. Any ideas what I'm doing wrong by adding this second ng-show? I tried using ng-if when trying to identifiy the organization and that worked fine with the form validation.. but that resolves my vmHostPrefix variable to undefined in my controller. Any help is appreciated!
ng-show hides the element with display: none, while ng-if will remove the element from the DOM. I think what you have here is a bug caused by having 2 elements with ng-model pointing to the same variable.
Why not do this without repeating so much code and instead try using an expression in ng-minlength.
ng-minlength="$root.sessionObj.org.name==='orgName1' ? 12 : 4"
Or even better have ui state rules for the org
ng-minlength="$root.sessionObj.org.minlength"
ng-maxlength="$root.sessionObj.org.maxlength"
I believed they fixed expression evaluations for ng-min max in 1.3
I'm trying to validate a form that is dynamically generated with JSON data, that is rendered to the page using ng-repeat. The data is questions with corresponding answers. The issue I'm running in to is that with a dynamic ng-model on each group, like so:
<div class="well question-well" ng-repeat="question in Posttest1Questions">
<p><strong>{{question.question}}</strong></p>
<ul>
<li ng-repeat="answers in question.answers">
<input type="radio" name="Q{{question.id}}" ng-model="question_[question.id]" id="{{question.id}}" value="{{answers.id}}" required data-key="{{answers.isCorrect}}">{{answers.answer}}
</li>
</ul>
</div>
Even when all the questions are answered, the form never turns valid. In turn, if I remove the ng-model attr, the form is always valid, even if no radio buttons has been selected.
Example Plunkr: http://plnkr.co/edit/DvcJ8byS0yF7iLp37Ets?p=preview
You can use ng-required to set a condition on the input's required status. In this case, if the model used with ng-model is null, then required. Otherwise, not required.
This way, once you've selected one of the answers (the model has a value), all of the answers for this question will not be marked as required.
<input type="radio" name="Q{{question.id}}" ng-model="question[question.id]" id="{{question.id}}" value="{{answers.id}}" ng-required="question[question.id] == null" data-key="{{answers.isCorrect}}" />
See it working here.
The underscore in
ng-model="question_[question.id]" seems wrong to me.
Please try ng-model="question[question.id]" then you can simply say required
updated your plnkr: http://plnkr.co/edit/gCZHFqd07880Os8FcxhG?p=preview
How can my ngMessages access information about the form error? Such as field name and other properties?
Example:
I've seen many examples that look like this:
<input type="text" ng-model="field" name="myField" minlength="5">
<div ng-messages="myForm.myField.$error">
<div ng-message="minlength">The value entered is too short</div>
</div>
This is not a good error message because it doesn't tell the user how long the input should be. It just tells them it's too short.
It should render something like: "This field must be at least {{ minlength }} characters."
Even better: "{{ field }} must be at least {{ minlength }} characters."
Having to define a different message for inputs of different minlengths is extremely not-DRY.
How can this be done with ngMessages?
You could keep the minlength value on the scope and then bind to it in the validation message.
<input type="text" ng-model="field" name="myField" minlength="::myFieldMinlength">
<div ng-messages="myForm.myField.$error">
<div ng-message="minlength">This field must be at least {{::myFieldMinlength}} characters.</div>
</div>
I would do it the same as jayChase suggested. It's definitely easiest way and as he has suggested using single binding won't be bad performance wise
How can I mimic the tags box behaviour from SO in AngularJS? I'm trying to do something kind of similar where the user enters a set of space/comma-delimited words and as each one is typed I want to parse it out and put it into an array. I know there are probably 30 different ways to do this with bespoke javascript but I'm looking to leverage AngularJS in the most efficient way possible here.
At the moment I have an ng-model based on the input field and I'm doing an ng-repeat to create spans containing each tag, but angular uses commas as the delimiter and it also includes partially-formed words. So I only want to include words that have been delimited by the space/comma and I want to put them into an array so I can perform some validation on each one as it's entered, see below.
<form role="form" class="form-inline" data-ng-submit="updateScore()">
<input data-ng-list data-ng-model="labels" placeholder="Enter labels" class="form-control" type="text" >
</form>
<span data-ng-repeat="label in labels track by $index">
<span class="badge">
{{ label }} 5 <span class="glyphicon glyphicon-remove-sign"></span>
</span>
</span>
Any ideas?
Figured it out actually...
<input data-ng-list="/[,\s]/" data-ng-model="labels" placeholder="Enter labels" class="form-control" type="text" >