Following is my code, I need to bind data to ng-model, when I bind ng-model = "value", I can see the value in the text field, but I want to update the value on changing the text input.
<tbody ng-repeat="action in model.editAction">
<tr ng-repeat="(key, value) in action | orderBy: '-key'">
<th> {{ key }} </th>
<td>
<input type="text" class="form-control"
ng-model="model.editAction.value" name = "key"
required/>
<span style="color:red" ng-show="main.AssetURL.$error.required ">Service name</span>
</td>
<td> {{ action.DESCRIPTION }} </td>
</tr>
</tbody>
In your controller define a $scope var like this:
$scope.value
In your input, place just value inside ng-model:
ng-model="value"
This way you are binding values between your view and your controller.
You can use ng-change for getting the new values which you input
<input type="text" class="form-control"
ng-model="model.editAction.value" name = "key" ng-change="onChangeValue(model.editAction.value)"
required/>
And in your controller,
$scope.onChangeValue=function(value){
console.log(value);
//you should see the new updated value
}
Related
<tr data-ng-repeat="formGroup in formGroups | filter: {page: PAGE_current}">
<td>
<input type="text" id={{formGroup.key}} name={{formGroup.name}}
ng-focus="setFocus('{{formGroup.name}}')"
minlength={{formGroup.min}} maxlength={{formGroup.max}}
size={{formGroup.size}}/>
</td>
</tr>
setFocus is called, but the return value is: No help for selected field: {{formGroup.name}}:undefined
Console Element:
<input type="text" id="lastName" name="lastName"
ng-focus="setFocus('lastName')"
minlength="2" maxlength="20" size="50/">
<td class="editInput">
<input type="text" id="{{formGroup.name}}" name={{formGroup.name}}
ng-focus="setFocus([formGroup.name])"
required minlength={{formGroup.min}} maxlength={{formGroup.max}}
size={{formGroup.size}}
ng-model="editUser[formGroup.name]"/>
</td>
This post answered my question 52624566, sorry newbie on angular.
No need of using {{ }} i.e. string interpolation with event binding.
When passing a value as parameter to a function directly use getter and the control name without interpolation. This gives the FormControl then use .value to get the current value of the control.
Eg : setFocus(formGroup.get('name').value))
I'm initializing my FormArray with this code
this.contents.forEach(content=> {
this.formArray.push( new FormControl(content.text, Validators.required));
});
and I want to link one FormControl with my textarea and change it with my ID.
<textarea matInput id="content-textarea" placeholder="Required" [formControlName]="formArray.at(id)"></textarea>
But I get this error message:
ERROR Error: Cannot find control with unspecified name attribute
How can i use a specific FormControl from a FormArray in my HTML Document?
EDIT: I cant use a FormControl if i dont have one. I got this error message because my Content-Array was empty and i tried to use the FormControl.
So i have a different problem. But thanks for your answers :)
What if you directly use formcontrol instead of formcontrolname
<textarea matInput id="content-textarea" placeholder="Required" [formControl]="formArray.controls[0]"></textarea>
demo
I did something like this, can't show demo it's part of the big module:
<tr *ngFor="let file of docInfoForm.controls.Documents.controls; let i = index;" [formGroup]="file" class="form-group">
<td>
<fa class="cust-file-icon" [name]="file.get('Name').value | fileTypeIcon"></fa>
<input [attr.id]="'file-type-' + i" type="hidden" class="form-control" formControlName="Type" placeholder="File Size">
</td>
<td class="left">
<text-control [ctr-id]="'file-name-' + i" [label-text]="'File Name'" formControlName="Name"
[error-text]="'File Name is required'" [mandatory]="true" [form-ctr]="file.controls.Name">
</text-control>
</td>
<td class="left">
<text-control [ctr-id]="'file-desc-' + i" [label-text]="'Description'" formControlName="Description"></text-control>
</td>
<td class="left">
<label for="{{'file-size-' + i}}" class="form-label">
<span class="file-size-label">Size</span>
<span class="file-size-value">{{ file.get('Size').value | fileSize: true }}</span>
<input [attr.id]="'file-size-' + i" type="hidden" class="form-control" formControlName="Size" placeholder="File Size">
</label>
</td>
<td>
<button class="btn btn-outline only-icon btn-round" (click)="removeFile(i)">
<clr-icon shape="times"></clr-icon>
</button>
</td>
</tr>
I have 2 radio buttons, which I assigned values of '0' and '1' respectively. I need to get the value when I click my Save Button but It returns an Undefined value. Here is my code. What could be my problem?
<tr ng-repeat="item in recruleData">
<td>
{{item.package_name}}
</td>
<td>
<input type="radio" name="radio" ng-model="radio.selectedProductBlock"
value="0" >A<br/>
<input type="radio" name="radio" ng-model="radio.selectedProductBlock"
value="1" > B
</td>
<a class="btn btn-primary pull-right" ng-click="radioValue();">Save</a>
</tr>
my JS Code
$scope.selectedProductBlock;
$scope.radioValue= function(){
alert($scope.selectedProductBlock);
}
You need to define a variable of type boolean inside the object radio,
$scope.radio = {};
$scope.radio.selectedProductBlock = false;
and then
And radioValue function
$scope.radioValue = function(){
console.log($scope.radio.selectedProductBlock);
}
According to your requirement, you need to define radio object in recruleData
each record
Ex :
$scope.recruleData = [
{"package_name" : "package1", "radio":{"selectedProductBlock":""}},
{"package_name" : "package1", "radio":{"selectedProductBlock":""}},
]
And radioValue function
$scope.radioValue= function(item){
alert(item.radio.selectedProductBlock);
}
In addition, you need to give a unique name for each row radio button groups. You can simply achieve that append $index to your radio button name.
HTML Code
<table>
<tr>
<th>Package</th>
<th>Actioins</th>
<th></th>
</tr>
<tr ng-repeat="item in recruleData">
<td>
{{item.package_name}}
</td>
<td>
<input type="radio" name="radio_{{$index}}" ng-model="item.radio.selectedProductBlock"
value="0" >A<br/>
<input type="radio" name="radio_{{$index}}" ng-model="item.radio.selectedProductBlock"
value="1" > B
</td>
<td><a class="btn btn-primary pull-right" ng-click="radioValue(item);">Save</a></td>
</tr>
</table>
Working JSFiddel
I have a table where inputis placed:
<tr *ngFor="let persons of ReceivedData">
<td *ngFor="let person of persons">
<div *ngIf="person.personId === editRowId && person.editable === true ">
<input type="number" [(ngModel)]="person.CarCount"
(focusout)="focusOutFunction()"/>
</div>
<div *ngIf="person.editable === false " (click)="toggle(person)">
{{ person.CarCount ? person.CarCount : '-' }}
</div>
</td>
<tr>
But the focusout event isn't fired.
Here's the method handling the focusout function:
focusOutFunction() {
}
Interestingly focusout works perfectly when input is not placed inside table:
<input type="number" (focusout)="focusOutFunction()" />
How can I fire an event when I focus inside of the table?
Here's a working plnkr of focusout proc'ing inside a table with a similar setup as you have. The other key is to include an autofocus attribute:
<input type="number" [(ngModel)]="person.CarCount"
(focusout)="focusOutFunction()" autofocus/>
Use blur event to get focus out.
<input type="number" [(ngModel)]="person.CarCount"
(blur)="focusOutFunction()"/>
Different 'ng-model name' in ng repeat - Possible?
<div ng-repeat="todo in todos">
<input type="text" ng-model="tag">
<button type="submit"ng-click="addTodo(todo._id)">Add</button>
</div>
In this case, there are some repeat todo item (based on todos json data) will show on frontend
My Problem: What i type on any input field , all input field showing same data
I need different ng-model name on each input field , I guess like this ng-model="tag($index)"
You could place the newly created model inside tag array by its $index, while declaring model inside the tag you should use array notation [] instead of ()
ng-model="tag($index)"
should be
ng-model="tag[$index]"
Markup
<div ng-repeat="todo in todos">
<input type="text" ng-model="tag[$index]">
<button type="submit"ng-click="addTodo(todo._id)">Add</button>
</div>
It is possible like below
<div ng-repeat="todo in todos">
<input type="text" ng-model="tag[todo]"> <--todo.key-->
<button type="submit"ng-click="addTodo(todo._id)">Add</button>
</div>
You can do it like this:
<input type="text" ng-model="todo.tag">