Develop Reference

How do I make ngFor with input inside not repeat the typing value?

I need to make multiple inputs with ngFor but when I enter a word, it is repeated in all the inputs there are, how can I solve this?
my code:
<div class="" *ngFor="let publication of publications">
...
<form #newCommentForm="ngForm" (ngSubmit)="onSubmit(newCommentForm, $event, publication._id)">
<div class="make-comment" >
<img src="{{url+ 'get-image-user/' + publication.user.image }}" *ngIf="publication.user.image" class="rounded-circle-mini align-self-center">
<input type="text" name="#text" #text="ngModel" [(ngModel)]="comment.text" id="input-coment" class="form-control" required placeholder="Your comment">
<button class="btn btn-sm btn-secondary" style="color: #fff;" type="submit"><i class="bi bi-arrow-bar-left"></i></button>
</div>
</form>
</div>

You're binding the variable 'comment.text' to every input [model]. Meaning, its value is shared between all your input scopes. You need to use 'publication', which is only scoped to each input.
*ngFor="let publication of publications"
Change [(ngModel)]="comment.text" to something like [(ngModel)]="publication.text"

You are binding all inputs to a single property comment.text. You should create one property for each input and bind input with it.

How to keep selected date after form submission?

I am using ng-bootstrap date picker to my form. I need to keep selected date picker value after form submission. Currently date picker values empty (reset) after form submission. How to keep selected date picker values?
<form class="form-inline" name="form" #invoiceheaderform="ngForm" novalidate (ngSubmit)="invoiceheaderform.form.valid && save();">
From Date *
<div class="input-group">
<input class="form-control ngbfield"
name="invfromdate" [readonly]="true" #vl="ngModel" [(ngModel)]="model.fromDate" ngbDatepicker #d1="ngbDatepicker">
<div class="input-group-append">
<button class="btn btn-outline-secondary fa fa-calendar" (click)="d1.toggle()" type="button"></button>
</div>
<!-- <div *ngIf="invoiceheaderform.submitted && vl.invalid" class="invalid-feedback">From Date is required</div> -->
</div>
<button type="submit" [disabled]="disableRunButton" class="btn btn-primary mb-2 expad">Save</button>
</form>

check whether you are modifying your model values (model.fromDate) in the save() function. Since it is a date, it is possible that you are changing the date format within the save() function and assign back to the same variable. If it is the case, use another variable to store modified values.

<div class="input-group">
<input class="form-control ngbfield" name="fromDate" [readonly]="true" #vl="ngModel" [(ngModel)]="model.fromDate" ngbDatepicker #d1="ngbDatepicker">
<div class="input-group-append">
<button class="btn btn-outline-secondary fa fa-calendar" (click)="d1.toggle()" type="button"></button>
</div>

The problem could be that the model values are reset on submit and since the values are bound by ngModel the date values are also reset
For submit, instead of calling save directly as above, consider passing the event as save($event) and calling event.preventDefault() from inside the save function

How do I get the value of a text field using AngularJS?

I want to get the value of a text field value using AngularJS when a form is submitted.
The code below always shows "undefined".
html:
<form ng-submit="AdvanceSearchSubmit($event)" name="AdvanceSearch" novalidate>
<p ng-show="!AdvanceSearch.SearchKeyWord.$pristine && AdvanceSearch.SearchKeyWord.$invalid" class="text-danger">Text Cannot Be Empty!</p>
<div ng-hide="AdvanceSearchModel" class="input-group">
<input name="SearchKeyWord" ng-model="SearchKeyWord" id="SearchKeyWord" class="form-control" placeholder="Search in timeline...." type="text" required>
<span class="input-group-btn" ng-click="isAdvanceSearch='false'; SearchPost(0,'true')">
<button ng-disabled="AdvanceSearch.$invalid" type="submit" name="search" id="search-btn" class="btn btn-flat">
<i class="fa fa-search"></i>
</button>
</span>
</div>
</form>
one attempt:
$scope.AdvanceSearchSubmit = function(event)
{
alert(event.target.value);
};
another attempt:
$scope.AdvanceSearchSubmit = function(event)
{
alert(event.SearchKeyWord.value);
};

instead of event pass the SearchKeyWord as a parameter
ng-submit="AdvanceSearchSubmit(SearchKeyWord)"
controller
$scope.AdvanceSearchSubmit = function(keyWord)
{
alert(keyWord);
};

You don't need to pass the event at all to your AdvanceSearchSubmit on submit. You already have your values available inside $scope like ng-model for input field like ng-model="SearchKeyWord"
alert($scope.SearchKeyWord); //access value from `$scope` directly

Angularjs button disable not working properly

I have the following in my page:
<input type="textbox" class="form-control" ng-model="reject_notes" id="rejectnotes" placeholder="Comments">
<button class="btn btn-warning" ng-disabled="!reject_notes" ng-click="rejectorder(reject_notes)">Reject</button>
and in my controller i have initialized:
$scope.reject_notes = "";
This worked a few days back but is not working anymore. When i enter some text in my textbox, i button is not enabling anymore. I also tried the following:
<button class="btn btn-warning" ng-disabled="reject_notes.length==0" ng-click="rejectorder(reject_notes)">Reject</button>
Any idea what might be happening?

You can do it by using ng-minlength also..it disabled button until minlength not proper
<input type="textbox" class="form-control" name ="reject_notes" ng-model="reject_notes" id="rejectnotes" placeholder="Comments" ng-minlength="1">
<button class="btn btn-warning" ng-disabled="ng-disabled='reject_notes.$error.minlength" ng-click="rejectorder(reject_notes)">Reject</button>

Initialize your $scope.reject_notes as undefined:
$scope.reject_notes = undefined;
then change your ng-disabled condition to "!reject_notes"
ng-disabled="!reject_notes"

How to use ngModelOptions and $rollbackViewValue() in AngularJS 1.3

I have a problem with my input fields in my modal view.
When I take a change in the input fields then it is updating the table list but when I leave the page and go back to this page with the table list then die changes are disappeared.
This is my modal view:
<form class="form-horizontal" name="editForm" novalidate>
<div class="modal-body">
<div class="form-group-sm has-feedback">
<label class="control-label">Firstname</label>
<input type="text"
class="form-control"
name="Fname"
ng-model="selected.fname"
ng-model-options="{updateOn: 'updateItem'}"
ng-required="true"
/>
</div>
</div>
//the same input field for lastname
...
<div class="modal-footer">
<button class="btn btn-default" ng-click="createItem(selected)" type="submit">Erstellen</button>
<button class="btn btn-default" ng-click="updateItem(selected)"> Ändern</button>
<button class="btn btn-default" ng-click="cancel()">Abbrechen</button>
</div>
</form>
Modal Ctrl:
$scope.cancel = function () {
$scope.editForm.$rollbackViewValue();
$modalInstance.dismiss('cancel');
}
$scope.updateItem = function (updateItem) {
CrudService.update(updateItem);
$scope.ok();
}
Crud Service:
...
update: function (updateItem) {
updateItem.$update();
},
...
I have only seen examples of $rollbackViewValue() with one input field and the code: $scope.myForm.inputName.$rollbackViewValue() but I have more than one input fields?

you should call $rollbackViewValue() through the form name:
editForm.$rollbackViewValue()
call it in your template:
{{editForm.$rollbackViewValue.toString()}}
and you will see how it actually works:
function () {
forEach(controls, function(control) {
control.$rollbackViewValue();
});
}

A little late but for others reference (I came across this looking for another issue with $rollbackViewValue).
Using $rollbackViewValue in controller: to use $scope to reference the form from the controller, you have to use the ng-form attribute on a child element of the form (like for instance the form-group div in your example).
That makes $scope.editForm.$rollbackViewValue() available in the controller and resets the entire form.
For cases where buttons are inside the form, using ng-submit and ng-model-options="{ updateOn: 'submit' }" on input fields, then adding 'type=button' attribute to cancel button element (so submit isn't triggered) is a quick solution.
Example:
https://embed.plnkr.co/IQ4vvutC3tcHvVBH0821/