I am trying to add red frame to a field in a form in angular.
When working with static fields (not populated with ng-repeat) everything is working good. When the field is created with ng-repeat looks like the ng-class that uses the current index is not working. The form state is correct but the class with the red frame is not added to the field.
See this Plunker: http://plnkr.co/edit/hDfTHY?p=preview
When adding a value to all input fields the button become enabled. However, only first input is red when empty.
Thanks
One option is to add inner form:
<div ng-form="nested" class="col-md-4" ng-class="{'has-error': nested.item.$invalid}">
<input type="text"
ng-model="item"
class="form-control"
name="item"
id="item{{$index}}"
required ng-minlength="2">
</div>
See this question
Related
In Angular 8, after user input "$10" and click(Onclick event), the box underneath should be updated with what user input and the entire box should be selected as shown in the picture.
Any tutorials, advice would be appreciated
Image
HTML
<div class="col-md-0.8">
<label class="padding_7">Costs</label>
</div>
<!-- Get user input (Only positive number) and need to be updated -->
<div class="col-md-1">
<input type="positive-number" />
</div>
<div class="col-md-2">
<button data-target="something" data-toggle="sth model" type="round-button custom-button">Update Cost</button>
</div>
Any Idea in Component.ts ???
I hope you are looking for a prototype, can you check the fiddle.
I have created a prototype for the question, please check it
Check fiddle
Try Property Binding, Pass the value in Ts or catch it via form ,Then dynamic the property [checked] in ts.
I have a page where I want to update a form with several radio buttons. I query an api, and use the returned array of objects to populate the current values for the radio buttons. The problem that I have is that only the last set of radio buttons actually shows the value. This is the code that I have (I am using [[ and ]] for the start and end symbols for angular):
<fieldset data-ng-repeat="s in sections">
<div class="form-group">
<div class="col-md-12">
<h2>[[ s.section.name ]]</h2>
</div>
</div>
<!-- Field Item -->
<div class="form-group m-b-20 bg-light" data-ng-repeat="f in s.fields">
<div class="col-md-12 m-b-30">
<h4>[[ f.field.name ]]</h2>
<input type="text" data-ng-model="f.comments" class="form-control input-md underline" placeholder="Comments">
</div>
<div class="col-sm-3">
<input type="radio" name="section-[[s.section.section_id]]-field-[[f.field.field_id]]" value="pass" class="form-control" data-ng-model="f.field_condition">
<label class="eval-pass"><i class="fa fa-check-circle green"></i> Pass</label>
</div>
<div class="col-sm-3">
<input type="radio" name="section-[[s.section.section_id]]-field-[[f.field.field_id]]" value="fail" class="form-control" data-ng-model="f.field_condition">
<label class="eval-fail"> <i class="fa fa-exclamation-circle red"></i> Fail</label>
</div>
<div class="col-sm-3">
<input type="radio" name="section-[[s.section.section_id]]-field-[[f.field.field_id]]" value="n/a" class="form-control" data-ng-model="f.field_condition">
<label class="eval-na"> <i class="fa fa-circle blue"></i> N/A</label>
</div>
<div class="col-sm-3">
<input type="radio" name="section-[[s.section.section_id]]-field-[[f.field.field_id]]" value="caution" class="form-control" data-ng-model="f.field_condition">
<label class="eval-caution"><i class="fa fa-exclamation-triangle yellow"></i> Caution</label>
</div>
</div>
[[ f.field_condition ]]
<hr>
</fieldset>
So basically, I have several sections, and each section has several fields. Each field has it's own radio button group (I am using the section and field ids to name the radio group). What I currently see is only the last field in each section actually shows the selected radio button. The other fields don't have any selection, even though the value for ng-model definitely does (I am showing the value of f.field_condition just to make sure there is a value).
For each field, I can see that the model is set. And if I select a value manually, I can see that the model changes, so it seems to me that the model is setup correctly. I just don't know why it won't initially show as selected for all rows but the last one.
I should also mention that if I save the form even with the missing radio button selections, the database is updated properly (it doesn't set the values to null, and if I manually change the selected value, it is updated in the db as well).
Does anyone have any ideas? Thanks!
EDIT
Here is a fiddle for this, although, it is working as expected in the fiddle. http://jsfiddle.net/dq8r196v/367/
I tried using the static data that I used in the fiddle, but I am still having the same problem. Does anyone know if this could be a CSS problem? The radio buttons are styled, and I didn't write the HTML or CSS.
UPDATE
I am still having this issue, so I built a new angular app and only used the code that is included in the fiddle that I have created. I am having the same problem with this new app, even though the same code works in the fiddle. I really don't understand what's happening here, but if anyone could shed some light, I would really appreciate it.
I have literally copied and pasted the code from my fiddle into a new angular app, and only the last group of radio buttons in each section is showing the value in the app.
Here is my complete code for the new angular app if someone else wants to try it out and see exactly what is happening: https://pastebin.com/qSR33yfM
I created the app on a single page for simplicity.
Here is the link to a pastebin with the exact json that I am using in my app: https://pastebin.com/utfVVQfT
I fixed the problem you're having by simply adding an array of objects ($scope.values) representing the different radio button options, and using an ng-repeat to create your radio buttons. See the following for the updated code: https://pastebin.com/s3hNzaXX
I know there are semantics around ng-repeat creating new $scopes, and imagine there is a conflict in scopes with your nested ng-repeats where it's binding to the radio buttons incorrectly and at a scope different than you want (the section level ng-repeat).
To confirm this suspicion, you could convert all of your interpolations in the code to use functions and console.log s and f at different points and confirm that field_condition is being set at a level you didn't intend.
Either way, it' best practice to create your radio buttons through data (and using ng-repeat), as is done with the $scope.values array, and a good side effect to doing this is not only can you update the different value options using data through AJAX or however you would like, but you won't have weird angular scoping issues as you're experiencing in your current code above.
I have a form with an input field that requires two values for ng-model. One to set the input field to required, the other to store the value that is typed into the input field. I just tried around and I know that it's not possible to assign two different values to ng-model. I also tried using ng-model two times and it's working. I am wondering why? That would not be legitimate, right?
Here is my code snippet:
<div ng-controller="MyController as myCtrl">
<form name="myForm" novalidate>
<label>First Name</label><br>
<input class="myClass" type="myCtrl.mapType" name="req" ng-required="isReq" ng-blur="isReq=true" ng-model="myCtrl.details.firstname.value" ng-model="required">
<div ng-show="myForm.req.$error.required" class="error">Field is required!
<label>Last Name</label><br>
<input class="myClass" type="myCtrl.mapType" name="req" ng-required="isReq" ng-blur="isReq=true" ng-model="myCtrl.details.lastname.value" ng-model="required">
<div ng-show="myForm.req.$error.required" class="error">Field is required!</div>
<button class ="button" ng-click="myCtrl.save()">Save</button>
</form>
</div>
Can anyone explain? If I do not provide the first name in the input field and click into the second input field, the error message is displayed correctly. And once I save the form, the given data is also saved correctly despite the two ng-models.
Basically it binds value with very first ng-model. There might be something you are missing.
<input class="myClass" type="myCtrl.mapType" name="req" ng-required="isReq" ng-blur="isReq=true" ng-model="myCtrl.details.lastname.value" ng-model="required"><br>
first ngModel: {{myCtrl.details.lastname.value}}<br>
second ngModel: {{required}}
Today I faced a situation with angularJS.
Hi have a recipe website, and to list the ingredients and theyr respective dosage I'm using angular's ng-repeat (here goes the snippet).
<div ng-repeat="food in foodList | filter:query">
<label>
{{food.name}}
</label>
<input type="text" class="form-control food-list-input" data-id="{{food.ingredientId}}" placeholder="Weight in grams.">
</div>
The thing is that when I apply the filter, all inputs I previously inserted some value, if they are hidden because of the filter, they return to empty.
Is there anyway around this?
I think you probably want to bind the input to something using ng-model, for example:
<input type="text" ng-model="food.dosage" class="form-control food-list-input" data-id="{{food.ingredientId}}" placeholder="Weight in grams.">
That will implement two-way binding from your model to the input tag, so that when ng-repeat re-runs, the previously entered values will be re-bound from the model.
I would like to validate a form with multiple radio check boxes inside ng-repeat.
How should I validate the selected option with radio button input:
Validation outside the ng-repeat works fine. For eg. when switching $index to customDish.
The problem is validation inside ng-repeat with $index.
Field Required should be shown exactly to the selected radio button inside ng-repeat loop.
Here is a plunker
[http://plnkr.co/edit/j6bswtctD0ixaQmcDrp1?p=preview][1]
Please help
Thanks in advance
[1]: http://plnkr.co/edit/j6bswtctD0ixaQmcDrp1?p=preview
Just compare this with your's ng-show:
ng-show="submitClicked && myOrderForm.dishQuantity.$error.required &&
($parent.checkboxSelection == $index)"
I've added one more condition, ensuring, that error will show only for selected item.
Another Solution
<input ng-pattern="onlyNumbers" placeholder="quantity" ng-required="$parent.checkboxSelection === {{$index}}" name="dishQuantity{{$index}}" id="dishPrice" data-ng-model="dish.quantity" type="text" class="dish-quantity" id="dishQuantity" />
and span tag
<span class="custom-label-danger" ng-show="submitClicked && myOrderForm.dishQuantity{{$index}}.$error.required ">Field Required</span>
Also working :)