I have same problem as described in this toppic:
Angular JS ng-message inside directive
Unfortunatelly that solutions is not working for me, because I am using my custom directive inside ng-repeat. So now ng-messages work only when error condition is fulfilled for all inputs.
http://plnkr.co/edit/lJT48bmYvR9DGFliIYDH?p=preview
I have tried many ways for creating ng-messages condition but nothing worked properly. Two of them You can find in above plunker:
ng-messages="form.doubleInputLeft.$error"
ng-messages="form['doubleInputRight' + $index].$error"
Please help me,
Regards
For input elements to work inside an ng-repeat, the index must be included as part of the name attribute.
<!-- index must be included in the name attribute --
<input name="doubleInputLeft" class="form-control ngMessageSample" type="{{inputType}}" ng-model="modelLeft" ng-minlength="2" ng-maxlength="20" required>
-->
<input name="doubleInputLeft{{index}}" class="form-control ngMessageSample" type="{{inputType}}" ng-model="modelLeft" ng-minlength="2" ng-maxlength="20" required>
<div ng-messages="form['doubleInputLeft'+index].$error" class="ngMessagesClass" ng-messages-multiple>
<div ng-message="minlength" class="ngMessageClass"> {{leftInputHeading}} must have at least 2 characters.</div>
<div ng-message="maxlength" class="ngMessageClass"> {{leftInputHeading}} must have at most 20 characters.</div>
</div>
Otherwise, the repeated elements will have duplicate names.
The DEMO on PLNKR
Related
I made html template for my app. Basically it's a radio/checkboxes with text inputs which contain answers to questions. It worked just fine until I've decided to add ngModel to them. The thing is that when I add 2 or more answers and click on a label to set the correct one(/s) only the last one selects, moreover the answertext disappears whenever I click on label.
html text:
<div *ngIf="question.typeQuestions==1">
<div *ngFor="let item of question.selectedAnswer; let i = index" class="checkbox-variable">
<input type="checkbox" id="customCheckbox{{i}}" name="customCheckbox" class="checkbox-square" [(ngModel)]="item.isCorrect" >
<label class="checkbox-label" for="customCheckbox{{i}}"><input class="checkbox-text" type="text" [(ngModel)]="item.text"></label>
</div>
</div>
ChrisY solved the problem.
having multiple input with the same name is definitive wrong here. Try name="customCheckbox{{i}}". When using ngModel you need a name that identifies the form control. It has to be unique
In Angularjs values are cleared only for UI components like (input, textarea, button) when I use ng-model to bind them. In the Master page (asp.net), we use two <div> elements, we dynamically hide one of them. The problem is when showing back the first element after hiding, the values in the components are cleared but the bound $scope object has values.
<input ng-disabled="true" type="text" datepopup ng-model="dataCopy.issueDate" class="form-control input-sm" autocomplete="off" />
There is no unbound/unbind event in Angularjs 1.3 to diagnose when these values are cleared.
When I use <span> with ng-bind as shown below, it persists the values and doesn't clear.
<span ng-bind="dataCopy.issueDate"></span>
Any idea, when what can make these values cleared (unbound) from these controls, and why it doesn't happen on <span> elements?
We designed the <div> elements with <form class="form-horizontal">, that's why it cleared all the values of the div element. When I replace <form> with <table> it works fine.
It puzzled me for a couple of days, I hope this helps others.
It's a simple Angular HTML question, I would like a bit clarity about the id of tags. For example, in my code I have:
<input class="inputfile" type="file" name="file" #file id="file"
(change)="onFileChange($event)"/>
<button mat-mini-fab color="primary" (click)="file.click()">
<mat-icon aria-label="Icon to upload file">cloud_upload</mat-icon>
</button>
<label for="file" >Upload your portifolio</label>
In that example, I had to set #file in the input for the button to work and also had to set id="file" for the label to work. Previously I thought they had the same function and it was just about syntax. Could someone clarify what are the uses of each?
If you want to identify an element using javascript function or from your controller using getElementByID or to point to a style in a style sheet, you need to set the id that has to that element be unique throughout your DOM.
However, when you want to access your element within the DOM file you need to refer the element using #. if you use just id you will have the error Cannot read property 'XXX' of undefined in your browser.
For example, in order to show/hide a button using the value of an input in DOM file without writing any javascript/angular code you could do something like the following, in which setting the id wouldn't work out.
<form class="example-form">
<mat-form-field class="example-full-width">
<input #nameField matInput placeholder="Name">
</mat-form-field>
<button type="button" *ngIf="nameField.value!==''" >Submit</button>
</form>
Reference to this to dealing with user input and this as a broader explanation of the # tag.
In an Angular application #mydiv can have different functions depending on the context.
On a DOM element <div #mydiv> is a reference to the element
A reference to an Angular component
On an element that is an Angular component, or has an Angular directive, where exportas:"ngform" is defined, #mydiv="ngForm" creates a component reference.
id in html used to assign unique mark for element (later can be used by javascript). # in html used as mark on this element (like link to this element). Example:you have pressed button and browser scrolls to that element marked with #file.
I'm using ui-bootstrap-datetime-picker with angularJS. And i'd like to know if it's possible to set show-meridian options of time-picker directly inside timepickerOptions ?
...
<input type="text" class="form-control"
datetime-picker="MM/dd/yyyy HH:mm"
timepickerOptions="{'show-meridian': 'false'}"
ng-model="ctrl.date.value"
is-open="ctrl.date.showFlag"/>
<span class="input-group-btn"></span>
...
This is a plnkr which illustrate the problem.
Root cause of the problem is wrong naming style. To make your code work, you have to change camel-case to dash-delimited: timepicker-options instead of timepickerOptions (see my forked plunker):
<input type="text" class="form-control"
datetime-picker="MM/dd/yyyy HH:mm"
timepicker-options="{'show-meridian': false}"
ng-model="ctrl.date.value"
is-open="ctrl.date.showFlag"/>
The key point here is normalization process being done by AngularJS. Since HTML is case-insensitive, AngularJS cannot convert HTML attribute named timepickerOptions into scope variable timepickerOptions - because timepickerOptions in HTML is seen by AngularJS exactly like timepickeroptions; so, there is no chance for it to determine how to normalize this name. Thus, you should always use -, _ or : to delimiter different words in directive name when using HTML.
I am starting with my angular6 and I come across the syntax below.
<input type="text"
class="form-control"
name="company-name"
ngModel
#nameField="ngModel"
required
minlength="3">
now my question is if ngModel and name is already there to uniquely identify form component and ngModel directive to bind it with angular form why we need #nameField="ngModel"?
We can have input value from name="company-name". so why 2 NgModels?
and what is the difference between #nameField="ngModel" and [(ngModel)]="nameField"?
To create a valid template-driven form control - you only have to add name="company-name" and ngModel.
The template reference #nameField="ngModel" can be used as a variable in your html (so it's optional).
[(ngModel)]="nameField" is the two-way data binding in Angular, aka "banana-box" (for more detailed explanation read this article two-way-data-binding-in-angular-2 or the official documentation NgModel )
I always thought it is also needed for validation purposes so the error message show up nicely below the control.