Develop Reference

Publishing an Input outside the Form to the Form via name programmatically with Angularjs

I need to publish an Input to a Form, while the Input sits outside the form. I managed to add the input, but the result is not what I excactly need (see the console output)
So I basically adding the outer input element to the form via form.$addControl(outerInput)
const MyApp = angular.module('app', []);
MyApp.controller('formCtrl', ['$scope', '$element', function($scope, $element){
$scope.dataModel = {
name: 'robert arschfick',
email: 'blabla',
age: 25,
text: 'text'
};
$scope.addOuterInputToForm = function(form, inputID){
// annoying as hell, I am retrieving the input element;
var input = angular.element(document.getElementById(inputID))[0];
form.$addControl(input);
console.log(form);
};
}]);
<script src="//unpkg.com/angular/angular.js"></script>
<div ng-app="app" ng-controller="formCtrl">
<form ng-submit="" name="testForm">
<input type="name" ng-model="dataModel.name" name="name" required>
<input type="email" ng-model="dataModel.email" name="email" required>
<input type="number" ng-model="dataModel.age">
</form>
<!-- I need to add this input the same way the inner inputs name
and email are published to the form, so that it is addressable
via its name in the form and that it is part of the form.controls
-->
<input type="text" required id="inputToAdd" name="text"
ng-model="dataModel.text">
<button ng-click="addOuterInputToForm(testForm, 'inputToAdd')">
Add Control
</button>
</div>
The input is added as a control, but the object looks different and has not all the ng $validators on it. Also I need to add it by name as a property to the form like "email" and "name" are:
This is the outside input added to the form. It misses all the ng-form attributes see the image after
This is the inside email input added to the form somehow internally. It has all the ng form properties like $untouched, $prestine etc.
So what I need is now to somehow fake this internal adding of the outer input programmatically so that the outer input is contained the same way by the form as the inner inputs "email" and "name"
Sorry for my english skills and I hope I was clear enough. Thanks in advance :)

The $addControl method needs the ngModelController of the <input>, not the <input> element itself.
To get the ngModelController of the element, enclose it in a div that has an ng-form directive:
<div ng-form="other">
<input type="text" required id="inputToAdd" name="text"
ng-model="dataModel.text">
</div>
<button ng-click="testForm.$addControl(other.text)">
Add Control
</button>
The DEMO
const MyApp = angular.module('app', []);
MyApp.controller('formCtrl', ['$scope', '$element', function($scope, $element){
$scope.dataModel = {
name: 'robert arschfick',
email: 'blabla',
age: 25,
text: 'text'
};
}]);
<script src="//unpkg.com/angular/angular.js"></script>
<div ng-app="app" ng-controller="formCtrl">
<form ng-submit="" name="testForm">
<input type="name" ng-model="dataModel.name" name="name" required>
<input type="email" ng-model="dataModel.email" name="email" required>
<input type="number" ng-model="dataModel.age">
</form>
<!-- I need to add this input the same way the inner inputs name
and email are published to the form, so that it is addressable
via its name in the form and that it is part of the form.controls
-->
<div ng-form="other">
<input type="text" required id="inputToAdd" name="text"
ng-model="dataModel.text">
</div>
<button ng-click="testForm.$addControl(other.text)">
Add Control
</button>
</div>

Check if form input fields have not changed

I have a form, let's call it myForm similar to this:
<form name="myForm" class="vertical grid-block shrink" ng-init="initSearch()" ng-submit="doSearch(myForm.$valid)" novalidate>
And three input fields: one with keeps details, second which is a starting date and third which is a ending date.
The fields look like this:
<input id="details" type="text" ng-model="myObject.details" placeholder="DETAILS_PLACEHOLDER">
<input id="from" class="uppercase" type="text" name="from" placeholder="{{datePlaceHolder}}" ng-model="myObject.from" required/>
<input id="until" class="uppercase" type="text" name="until" placeholder="{{datePlaceHolder}}" ng-model="myObject.until"/>
And I want to display a button based on the form fields. If the form fields have not changed the button should be hidden.
I tried using $dirty but the problem is $dirty remains true even if the user types in details and then deletes the text.
Anyone has any solution for this?
Also the solution must work even if I come back to the form from another page which probably has another controller.
Any help is appreciated. Thank you

This should fix that. It checks for $pristine, ie untouched.
<button ng-show="myForm.$pristine"></button>

Take a look at sample below, basically you need $viewValue for displaying/hiding submit button.
var app = angular.module('app', []);
app.controller('ctrl', function($scope) {
$scope.myObject = {};
$scope.datePlaceHolder = 'from date';
$scope.datePlaceHolder2 = 'until date';
$scope.doSearch = function() {
alert('submit');
}
$scope.initSearch = function() {
console.log('init search called');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<p>Need to fill FROM and UNTIL values to submit</p>
<form name="myForm" ng-init="initSearch()" ng-submit="doSearch(myForm.$valid)" novalidate>
<input id="details" type="text" ng-model="myObject.details" placeholder="DETAILS_PLACEHOLDER">
<input id="from" type="text" name="from" placeholder="{{datePlaceHolder}}" ng-model="myObject.from" required/>
<input id="until" type="text" name="until" placeholder="{{datePlaceHolder2}}" ng-model="myObject.until" />
<button type="submit" ng-show="myForm.from.$viewValue && myForm.until.$viewValue">Submit</button>
</form>
</div>
You can add more conditions to
ng-show="myForm.from.$viewValue && myForm.until.$viewValue"
Notice that if you delete value from input, submit button disappears

how to use autocomplete in angularjs

I have an application with add friend feature, in that feature, user must fill their friend's username in the textbox. this is the html code:
<div content-for="title">
<span>Add Friend</span>
</div>
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">User ID</label>
<input type="text" class="form-control" data-ng-model="add.email" id="exampleInputEmail2" placeholder="User ID">
</div>
<button type="submit" class="btn btn-default" data-ng-click="addfriends()">Add</button>
the interface will be like this
and this is the js code:
// addfriend
$scope.add = {};
$scope.addfriends = function(){
$scope.messages = {
email : $scope.add.email,
userid : $scope.datauser['data']['_id']
};
//event add friend
socket.emit('addfriend',$scope.messages,function(callback){
if(!callback['error']){
$scope.datauser['data']['penddingrequest'].push(callback['data']);
//push pendding request to localstorage user
localStorageService.remove('user');
localStorageService.add('user', $scope.datauser);
$scope.add['email'] = '';
alert('Successfully added friend');
}else{
var msg = callback['error'];
navigator.notification.alert(msg,'','Error Report','Ok');
}
});
};
I want to change this feature little bit, I want to make this textbox showing some suggestion based on the input, like if user input 'a', the textbox will show all user id that start with 'a'. something like twitter's searchbox or instagram searchbox. these user ids is from database.
example searchbox of web instagram
my question is how to change this textbox to be autocomplete but still work like before? thanks very much

There are many ways to do this.
First is this one: You basically create Angular directive for your input.
http://jsfiddle.net/sebmade/swfjT/
Another way to do is to attach onKeyUp event to your input:
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">User ID</label>
<input type="text" class="form-control" data-ng-model="add.email" id="exampleInputEmail2" placeholder="User ID" ng-keyup="searchFriends()">
<div ng-model="searchFriendsResult" />
</div>
And then, in your controller, you create a searchFriends function that will:
Search your database
Display the result in the view.
Something like this (not a complete code):
$scope.searchFriends = function(value){
// Make Ajax call
var userRes = $resource('/user/:username', {username: '#username'});
userRes.get({username:value})
.$promise.then(function(users) {
$scope.searchFriendsResult = users;
});
};

Use Bootstrap Typeahead
<input type="text" ng-model="asyncSelected"
placeholder="Locations loaded via $http"
uib-typeahead="address for address in getLocation($viewValue)"
typeahead-loading="loadingLocations"
typeahead-no-results="noResults"
class="form-control"/>

Why is my angularjs directive causing two-way binding to fail?

I can't figure out why when my directive is enabled on an element, the two-way binding fails.
Consider this plunkr
On the first removing the tooltip={{input1Error}} makes the input1 variable update as soon as you type in a valid email.
When tooltip={{input1Error}} is added, when typing in a valid email, the input1 model is never updated.
What am I missing?

There is a documented issue with the scope of the controller. You can get around this by implementing the changes below.
Change your controller to this:
app.controller('ctrl1', ['$scope','$log', function($scope, $log) {
$scope.model = {};
}]);
And the form to:
<form name="myForm" novalidate>
<div class="form-group">
<label>Input 1 *</label>
<input
class="span2"
name="input1id"
type="email"
ng-model="model.input1"
tooltip="{{model.input1error}}"
tooltip-placement="bottom"
tooltip-trigger="openPopup"
tooltip-trigger-on='openPopup'
tooltip-trigger-off='closePopup'
tooltip-show="myForm.input1id.$invalid"
required
/>
<pre>Input 1 is invalid: {{myForm.input1id.$invalid}}</pre>
<pre>Input 1 valid email: {{!myForm.input1id.$error.email}}</pre>
<pre>Input 1 error msg: {{model.input1error}}</pre>
</div>
<span class='error hidden' error-on="!myForm.input1id.$error.email" error-for='input1error'>Please enter a valid email</span>
<span class='error hidden' error-on="!myForm.input1id.$error.required"" error-for='input1error'>This field is required</span>
</form>

How to manually trigger a form's submit in AngularJS?

I have a form that I wanted be nested, but it is not possible since HTML can't accept nested form. Is there a way I can manually invoke the submit(triggers the validation, e.g. required) on first form on AngularJS?
Here's how the code looks like:
<div ng-conroller="ContactController">
<form ng-submit="saveHeaderAndDetail()">
<label for="Description">Description</label>
<input type="text" ng-model="Description" required/>
<input type="text" style="visibility:hidden" />
</form>
<form ng-submit="addToDetail()">
...
</form>
<input type="button"
ng-click="what code could trigger the first form's submit?"/>
</div>
Btw, both forms are under one controller if that helps

Try creating a directive that catches an event:
var app = angular.module('myApp', []);
function MyCtrl($scope) {
$scope.triggerSubmit = function() {
$scope.$broadcast('myEvent');
console.log('broad');
};
$scope.onSubmitted = function() {
alert('submitted!');
};
}
app.directive('submitOn', function() {
return {
link: function(scope, elm, attrs) {
scope.$on(attrs.submitOn, function() {
//We can't trigger submit immediately, or we get $digest already in progress error :-[ (because ng-submit does an $apply of its own)
setTimeout(function() {
elm.trigger('submit');
});
});
}
};
});
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet"/>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.angularjs.org/1.0.0/angular-1.0.0.js"></script>
<div ng-controller="MyCtrl">
<form submit-on="myEvent" ng-submit="onSubmitted()">
Form...
</form>
<hr />
<a class="btn" ng-click="triggerSubmit()">Submit</a>
</div>
Original source:
http://jsfiddle.net/unWF3/

I've answered a similar question here AngularJS - How to trigger submit in a nested form
Basically, you can trigger validation by firing $validate event
isFormValid = function($scope, ngForm) {
$scope.$broadcast('$validate');
if(! ngForm.$invalid) {
return true;
}
For working code example & a small utility method which is helpful in showing validation messages, see answer in the above link.

You can have nested forms with ng-form directive. It will be like:
<form name="accountForm">
<div data-ng-form="detailsForm">
<input required name="name" data-ng-model="name">
</div>
<div data-ng-form="contactsForm">
<input required name="address" data-ng-model="address">
</div>
<button type="submit">Save</button>
</form>
That way when submit will be triggered for the accountForm it will validate nested ng-forms also.

There's an easier way to do that, You can give a name for each form that you have in your app, then you'll be able to send the entire angular object of the form that you want to trigger or do whatever you want with it. Example:
<div ng-conroller="ContactController">
<form name="myFirstForm" ng-submit="saveHeaderAndDetail()">
<label for="Description">Description</label>
<input type="text" ng-model="Description" required/>
<input type="text" style="visibility:hidden" />
</form>
<form name="mySecondForm" ng-submit="addToDetail()">
...
</form>
<input type="button"
ng-click="saveHeaderAndDetail(myFirstForm)"/>
</div>
Then in your function
saveHeaderAndDetail (myFirstForm) {
myFirstForm.$submitted = true
...
}

We can always submit a form directly using the submit
() function from javascript.
document.getElementById("myform").submit()
In this way, we can validate the form using angularjs first and if the form is valid then submit it using the submit method.