Is it possible to add dynamic text in the ng-model name?
data js
self.Map = [{ Id: 0, Name: 'Map1' }, { Id: 1, Name: 'Map2' }, { Id: 2, Name: 'Map3' }]
html
<div ng-repeat="option in mainCtrl.Map">
<div style="text-align:left;" class="col-md-6">
{{option.Name}} Map
</div>
<div style="text-align:right;" class="col-md-6">
<input type="text" id="Is{{option.Name}}" name="Is{{option.Name}}" ng-model="mainCtrl.Is{{option.Name}}"/>
</div>
</div>
desired output
ng-model="mainCtrl.IsMap1"
Refer to https://www.w3schools.com/js/js_objects.asp, you can access object in these 2 way:
objectName.propertyName
objectName["propertyName"]
You may try following way such that angularJs can bind the value you want:
<input type="text" id="Is{{option.Name}}" name="Is{{option.Name}}" ng-model="mainCtrl['Is'+option.Name]"/
Have you tried to add dummy field to your HTML input tag like
<div ng-repeat="option in mainCtrl.Map">
<div style="text-align:left;" class="col-md-6">
{{option.Name}} Map
</div>
<div style="text-align:right;" class="col-md-6">
<input type="text" id="Is{{option.Name}}" name="Is{{option.Name}}" ng-model="mainCtrl[this.getAttribute('dummyfield')]" dummyfield="{{option.Name}}Role" />
</div>
</div>
Related
I have the following html. I want to add ace.js editor in my code and map the value in the Editor to answer field of the a form
<div class="form-group" id="answer-div">
<div class="label-div">
<label class="control-label"><strong>Answer</strong></label>
</div>
<div id="add-more-answer-div" class="two-column-grid">
<div id="answer-filename-div">
<label id="filename-label" for="answer-filename">Name</label>
<input type="text" id="answer-filename">
<button type="button" id="more-answer-button" class="unselected-button">Add More Sections</button>
</div>
</div>
<div class="control-div" id="editor-div">
<div id="editor" class="form-control" formControlName="answer" [ngClass]="validateField('answer')">Remove this and enter code here</div>
<app-show-errors [control]="practiceQuestionForm.controls.answer"></app-show-errors>
</div>
</div>
The corresponding form is
this.practiceQuestionForm = this.fb.group({
...
answer:[null,Validators.required],
....
})
When I run the code, I get the error Error: No value accessor for form control with name: 'answer' corresponding to html code <div id="editor" class="form-control" formControlName="answer" [ngClass]="validateField('answer')">Remove this and enter code here</div>
What am I doing wrong?
Hi i have form in angularjs and that form have many checkboxes on clicking first checkbox i,e check All i want to checked the all checkboxes . how i can i do that with angular for each field loop here is my sample code I am trying in code snipt.
vm.asas = function() {
angular.forEach($scope.quizSettingsForm, function(field) {
console.log(field);
angular.forEach(field, function(errorField) {
errorField.$setTouched();
});
});
console.log(vm.QuizSettings);
};
<form name="quizSettingsForm" novalidate>
<div class="panel panel-default">
<div class="panel-heading">
QUIZ SETTINGS
</div>
<div class="panel-body">
<ul>
<li>
<div class="checkbox">
<input type="checkbox" id="checkall" ng-model="vm.checkAll" ng-click="vm.asas()" />
<label for="checkall">Check /Uncheck ALL</label>
</div>
</li>
<li>
<div class="checkbox">
<input type="checkbox" ng-model="vm.QuizSettings.IsOpened" id="Cohort" />
<label for="Cohort">Have a open Quiz</label>
</div>
</li>
<li>
<div class="checkbox">
<input type="checkbox" ng-model="vm.QuizSettings.IsMandatory" id="mandatory" />
<label for="mandatory">Is Mandatory</label>
</div>
</li>
<li>
<div class="checkbox counterdiv">
<input type="checkbox" ng-model="vm.QuizSettings.ShouldExpireAfterExpiry" id="invitation" />
<label for="invitation"> <p>The quiz will expire <input type="number" ng-model="vm.QuizSettings.Expiry" ng-min="1" name="expiry"> days after invitation</p></label>
<span class="validation-message" ng-show=" vm.QuizSettings.ShouldExpireAfterExpiry && quizSettingsForm.expiry.$touched && quizSettingsForm.expiry.$error.min"><i class="fa fa-warning"></i> The minimum value is 1.</span>
</div>
</li>
<li>
<div class="checkbox">
<input type="checkbox" ng-model="vm.QuizSettings.AllowRetakes" id="dontallow" />
<label for="dontallow">Allow Retake and dont allow more than </label>
<input type="number" ng-model="vm.QuizSettings.AlllowMoreThen" ng-min="1" name="dontallow"><span style="color: #696969;font-size: 18px;font-weight: normal;"> Retakes </span>
<span class="validation-message" ng-show="quizSettingsForm.dontallow.$touched && quizSettingsForm.dontallow.$error.min"><i class="fa fa-warning"></i> The minimum value is 1.</span>
</div>
</li>
</ul>
</div>
</div>
</form>
One Approach (if checkbox properties are on same object with other properties)
You could (not necessarily should) store property names in an array, and then you could use a forEach loop to set the property itself on the vm.quizSettings object:
function selectAll(){
var myArray = [
"IsOpened",
"IsMandatory",
"ShouldExpireAfterExpiry"
];
angular.forEach(myArray, function(propName){
vm.QuizSettings[propName] = true;
});
}
Much Better (if checkbox properties are alone on same object)
It would be much better if you could avoid storing property names as strings. If all of your checkbox boolean properties to update were alone on it's own object, then it becomes much cleaner:
function selectAll(){
var myArray = Object.keys(vm.QuizSettings);
angular.forEach(myArray, function(propName){
vm.QuizSettings[propName] = true;
});
}
Better Still (simply decorate the checkboxes that this behavior should apply to)
Create a custom directive selectAllListener that listens to a "SelectAll" event and updates ngModel value to true when that event is raised.
function thisDirective() {
return {
restrict: 'A',
require: 'ngModel',
link: function(scope, el, attr, ngModel){
scope.$on("SelectAll", function(){
ngModel.$setViewValue(true);
ngModel.$render();
});
}
}
}
Add the select-all-listener decorator directive to your checkboxes:
<li>
<div class="checkbox" >
<input select-all-listener type="checkbox" id="checkall" ng-model="vm.checkAll" ng-click="vm.asas()"/>
<label for="checkall" >Check /Uncheck ALL</label>
</div>
</li>
Raise the event from within your controller:
function selectAll(){
$rootScope.$broadcast("SelectAll");
}
Build an object for your form where isChecked key refers to checkbox value and name refers the label and value refers the model or value of input.
$scope.FormAttributeList = [
{
id: 1,
name: "xyz",
value: "xyz",
isChecked: false
},
{
id: 2,
name: "xyz",
value: "xyz",
isChecked: false
},
{
id: 3,
name: "xyz",
value: "xyz",
isChecked: false
},
{
id: 4,
name: "xyz",
value: "xyz",
isChecked: false
}
]
your code will be like
<div class="panel-body">
<ul>
<li>
<div class="checkbox" >
<input type="checkbox" id="checkall" ng-model="vm.checkAll" ng-click="selectAll(vm.checkAll,FormAttributeList)"/>
<label for="checkall" >Check /Uncheck ALL</label>
</div>
</li>
<li ng-repeat="item in FormAttributeList">
<div class="checkbox">
<input type="checkbox" ng-model="item.value" id="item.id" />
<label for="Cohort" >{{item.name}}</label>
</div>
</li>
</div>
Now create a function like
$scope.selectAll = function(checkAll,List) {
angular.forEach(list,function(value,key){
value.isChecked = checkAll;
});
};
This is the best way to do what you want it'll remove your unnecessary code.
I am trying to make a specific form field in my overall form dynamic so that x amount of objects can be added to the array of that field.
However, every time the page inits I get a
Error: Cannot find control with path: 'media -> '
This is my form.ts
this.cardForm = new FormGroup({
'title': new FormControl(cardTitle),
media: this._fb.array([
this.initMedia(),
]),
'links': new FormGroup({
'news': new FormControl(news),
}),
initMedia() {
return this._fb.group({
type: new FormControl(),
raw: new FormControl(),
primary: new FormControl(),
thumbs: this._fb.group({
default: new FormControl()
})
})
}
addMedia(){
const control = <FormArray>this.cardForm.controls['media'];
control.push(this._fb.control(['']));
}
removeMedia(i: number){
const control = <FormArray>this.cardForm.controls['media'];
control.removeAt(i);
}
this is my form.html:
<div class="row">
<div class="col-xs-12">
<form [formGroup]="cardForm" (ngSubmit)="onSubmit(cardForm.value)">
<div class="row">
<div class="col-xs-12">
<button
type="submit"
class="btn btn-success">
Update Card</button>
<button
type="button"
class="btn btn-danger"
(click)="onCancel()">
Cancel</button>
</div>
</div>
<div formArrayName="media">
<div class="row">
<div class="col-xs-12">
<div class="form-group">
<div *ngFor= "let media of cardForm.controls.media.controls; let i=index">
<span>Media {{i + 1}}</span>
<span *ngIf="cardForm.controls.media.controls.length > 1" (click)="removeMedia(i)"></span>
</div>
<div [formGroupName]="i">
<div>
<label>Url</label>
<md-input-container class="mdcontainer">
<input mdInput placeholder="Media Url" type="text" formControlName="raw">
</md-input-container>
</div>
</div>
</div>
</div>
</div>
</div>
And the media[] looks like this:
media: [
{
raw:'string',
primary: boolean,
type: 'string',
thumb: {
default: 'string'
{
}
]
What am I missing/doing wrong here for that error to come up?
Any help/tips/suggestions would be much appreciated.
[formGroupName]="i" should be inside of *ngFor. In this case i variable will have non undefined value
<div *ngFor="let media of cardForm.controls.media.controls; let i=index">
<span>Media {{i + 1}}</span>
<span *ngIf="cardForm.controls.media.controls.length > 1" (click)="removeMedia(i)"></span>
<div [formGroupName]="i">
<div>
<label>Url</label>
<md-input-container class="mdcontainer">
<input mdInput placeholder="Media Url" type="text" formControlName="raw">
</md-input-container>
</div>
</div>
</div>
Plunker Example
You could try the get method instead. I think it is a bit more user-friendly:
cardForm.get('media')
Check it out in the docs here: https://angular.io/guide/reactive-forms#inspect-formcontrol-properties
I am a newbie in angularJS. please anyone can tell me how to achieve this task to complete,
When I select something from dropdown list the related information will be shown in readonly fields. The following attachment is shown below
There are a number of ways you could achieve this, I would create an array of objects with those three values, iterate over that array and display the package name in the dropdown. Then once selected set a scope variable to be the selected object and then bind the price and validity of that scope variable object to each of those readonly fields.
Angular filters will help you display only the part of the object that you want in the dropdown.
EDIT: Here is my solution
<div ng-app="myApp" ng-controller="myController">
<div class="col-md-4">
<select class="form-control" name="package_name" id="pack" ng-required="true">
<option value="">--Select Package Name--</option>
<option ng-repeat="for item in items" ng-click={change(item)}>{item.item}</option>
</select>
</div>
<div class="row">
<div class="col-md-3 col-sm-offset-1">Validity</div>
<div class="col-md-4">
<input type="text" class="form-control" name="validity" id="valid" ng-bind="{{selecteditem.validity}}" readonly="readonly">
</div>
</div><br>
<div class="row">
<div class="col-md-3 col-sm-offset-1">Price</div>
<div class="col-md-4">
<input type="text" class="form-control" name="price" id="price" ng-bind="{{selecteditem.price}}" readonly="readonly">
</div>
</div>
<script>
var app = angular.module("myApp",[]);
app.controller('myController',function($scope){
$scope.selecteditem = {};
$scope.items = [{ "item": "item1", "validity": "1 month", "price": "0 rupees" }, { "item": "item2", "validity": "1 year", "price": " 1000 rupees" }];
$scope.change = function(item) {
$scope.selecteditem = item;
}
});
</script>
You can use 'ng-chnage' here, like;
<div ng-app="myApp" ng-controller="myController">
<select ng-model="mymodel" ng-change="changed(mymodel)">
<option ng-repeat='b in books'>{{b.name}}</option>
</select>
<br><br>
<input type="text" value={{mymodel}} readonly>
<br>
<input type="text" id="secondOne" readonly>
</div>
<script>
var app=angular.module("myApp",[]);
app.controller('myController',function($scope){
$scope.books=[{'name':'book1','price':'200' },{'name':'book2','price':'400'}]
$scope.changed=function(value)
{
for(var i=0;i<$scope.books.length;i++)
if($scope.books[i].name==value)
$("#secondOne").val($scope.books[i].price);
}
})
</script>
Used jQuery just to select an element.
I didn't make it complex, it's simple easy to understand.
i am new to angularjs and javascript,I am having a list of radio buttons and have to make some of them selected,so can anybuddy please tell me how to achieve this?I tried ng-value=true with no luck,my code is as below:
<ons-list-item modifier="tappable" ng-repeat="area in vm.AreaList" >
<label class="radio-button radio-button--list-item line-h45">
<input type="radio" ng-bind="area.name" ng-model="vm.selectedArea" name="area" ng-value="area.code" >
<div class="radio-button__checkmark radio-button--list-item__checkmark">
</div>
{{area.name}}
</label>
</ons-list-item>
you can do something like this in your controller:
$scope.results = {
favorites: [{
id: "WatchList1",
title: "WatchList1"
}, {
id: "WatchList2",
title: "WatchList2"
}, {
id: "WatchList3",
title: "WatchList3"
}]
};
$scope.selectedRow = {
id: 'WatchList2'
};
$scope.event = {
type: {
checked: true
}
}
and your html:
<div>
<div ng-repeat="row in results.favorites">
<input type="radio" ng-model="selectedRow.id" value="{{ row.id }}" style="opacity: 1;" class="pointer" />
<span>{{ row.title }}</span>
</div>
</div>
Single box
You should use ngChecked for that.
https://docs.angularjs.org/api/ng/directive/ngChecked
<ons-list-item modifier="tappable" ng-repeat="area in vm.AreaList" >
<label class="radio-button radio-button--list-item line-h45">
<input type="radio" ng-bind="area.name" ng-model="vm.selectedArea" name="area" ng-value="area.code"
ng-checked="true">
<div class="radio-button__checkmark radio-button--list-item__checkmark">
</div>
{{area.name}}
</label>
</ons-list-item>
Only one radio button can be selected at a time.
If you want multiple selected items, then use checkbox and to select, make model value equal to value attribute.