I am pretty much beginner with AngularJS, and I am trying to submit a form, as follows:
<div ng-include="APP_URL + '/view/myResolver/searchForm.html'" ng-controller="MySearchFormController"> </div>
This is my searchForm.html:
<div class="container">
<div class="row">
<div class="col-md-14">
<div class="well">
<div class="col-md-9">
<form ng-submit="submit()" class="form-horizontal clearfix" role="form" >
<div class="form-group">
<label for="teamName" class="col-md-3 control-label">Team name</label>
<div class="col-md-9">
<input type="text" ng-model="myName" id="myName" class="form-control">
</div>
</div>
</div>
<div class="row">
<div class="col-md-0"></div>
<button ng-click="onFormReset()" class="btn btn-default">Reset</button>
<input type="submit" id="submit" class="btn btn-primary" value="Search"/>
</div>
</form>
{{teamName}}
</div>
</div>
</div>
UPDATE
Controller:
angular.module('MyApp')
.controller('MySearchFormController', ['$scope', function($scope){
$scope.submit = function (){
if ($scope.myName) {
alert($scope.myName);
$scope.teamName = this.teamName;
}
}
}]);
What is currently happening is the text is automatically appearing in the {{teamName}} field.
Instead, I would like to make it work only onSubmit(), namely clicking the Search button.
You can try like this :
function demo ($scope) {
$scope.submit = function () {
$scope.submitted = true;
};
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller="demo">
<form ng-submit="submit()">
<input type="text" ng-model="teamName">
<button>Submit</button>
</form>
<p ng-if="submitted">{{ teamName }}</p>
</div>
BUT it is not optimal, as once you submitted one time, $scope.submitted is true and you will get the same problem, again.
SO, I would recommend you to not bind your {{ teamName }} to the same reference as the input :
function demo ($scope) {
$scope.submit = function () {
$scope.teamNameCopy = angular.copy($scope.teamName);
};
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller="demo">
<form ng-submit="submit()">
<input type="text" ng-model="teamName">
<button>Submit</button>
</form>
<p>{{ teamNameCopy }}</p>
</div>
OK, the issue is resolved.
Unfortunately, that was an issue related to incorrectly closing html tags, and not
Related
I'm still learning to programme.
How I can show and hide two not very different HTML forms with a button in Angular?
I have a code but it shows only two forms and doesn't hide them.
I want to display these two forms on one row. How I can do this?
Please help me.
My HTML code:
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<button class="btn btn-primary" ng-click="showDiv=true; hideMe()" >Show Div</button>
<button class="btn btn-primary" ng-click="showDiv1=true; hideMe()" >Show Div1</button>
<div ng-show="showDiv">
<div class="col-xl-3">
<div class="form">
<form>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="database_address">Потребител</label>
<input type="text" class="form-control" required ng-model="activeItem.username" placeholder="Потребителско Име..." />
</div>
<div class="form-group">
<label for="password">Парола</label>
<input type="text" class="form-control" required id="password" ng-model="activeItem.password" />
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="username">Оператор</label>
<input type="text" class="form-control" required id="username" ng-model="activeItem.name" />
</div>
</div>
</div>
<button class="btn btn-primary" ng-disabled="userForm.$invalid" type="submit">Запазване</button>
</form>
</div>
</div>
</div>
<div ng-show="showDiv1">
<div class="col-xl-3">
<div class="form">
<form>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="database_address">Потребител</label>
<input type="text" class="form-control" required ng-model="activeItem.username" placeholder="Потребителско Име..." />
</div>
<div class="form-group">
<label for="password">Парола</label>
<input type="text" class="form-control" required id="password" ng-model="activeItem.password" />
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="username">Оператор</label>
<input type="text" class="form-control" required id="username" ng-model="activeItem.name" />
</div>
</div>
</div>
<button class="btn btn-primary" ng-disabled="userForm.$invalid" type="submit">Отлагане</button>
</form>
</div>
</div>
</div>
</body>
</html>
Angular code. Maybe it is not very right i think, but you will help me.
Thanks again!
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.hideMe = function(){
console.log('hide the button');
$scope.hide();
}
});
You have to set variable to false(ng-show), and then when user click the button, set variable to true:
Leave ng-click attribute like this:
<button class="btn btn-primary" ng-click="hideDiv()" >Show Div</button>
<button class="btn btn-primary" ng-click="hideDiv1()" >Show Div1</button>
Then:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.showDiv = false;
$scope.showDiv1 = false;
$scope.hideDiv = function(){
if ($scope.showDiv) {
$scope.showDiv = false;
} else {
$scope.showDiv = true;
}
}
$scope.hideDiv1 = function(){
if ($scope.showDiv1) {
$scope.showDiv1 = false;
} else {
$scope.showDiv1 = true;
}
}
});
Here is a demo that may help you get started. Go over the docs for ng-show and ng-click
var app = angular.module("app", []);
app.controller("HelloController", function($scope) {
$scope.message = "Hello, AngularJS";
$scope.showHello = true;
$scope.showBye = false;
$scope.toggleBye = () => {
$scope.showBye = !$scope.showBye;
};
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<body ng-app="app">
<div ng-controller="HelloController">
<h2 ng-show="showHello">Hello</h2>
<h2 ng-show="showBye">Bye</h2>
<h2>Show always</h2>
<button ng-click="toggleBye()">toggle bye</button>
</div>
</body>
I have a function reset(username) that outputs whatever is entered into the input field of ng-model="username". Why is it not appearing in console though?
This is my function
$scope.reset = function (username) {
console.log(username);
};
and the way I submit the form
<form name="Form" ng-controller="ResetController" ng-submit="reset(username)">
<div>
<div class="row top5">
<label for="username">Username</label>
<div class="col-xs-4">
<input type="text" id="username" placeholder="" maxlength="255"
ng-model="username" required autofocus>
</div>
<div>
<div class="col-xs-5">
<button translate class="btn btn-secondary" type="submit">Reset</button>
</div>
</div>
</div>
</form>
Controller as requested
app.controller("ResetController", function ($scope) {
$scope.username='';
$scope.reset = function (username) {
console.log('username = ', username);
};
});
I believe you do have the ng-app and everything else besides this form, however it is better handled by the DOM if you manipulate your inputs as properties of an object and not directly as $scope. properties. See answers to this here. And note in the code how I attached username to $scope.object.username
var app = angular.module('myApp',[])
app.controller('ResetController',['$scope',function($scope){
$scope.object = {};
$scope.reset = function(username){
console.log(username);
};
}])
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<form name="Form" ng-controller="ResetController" ng-submit="reset(object.username)">
<div>
<div class="row top5">
<label for="username">Username</label>
<div class="col-xs-4">
<input type="text" id="username" placeholder="" maxlength="255"
ng-model="object.username" required autofocus>
</div>
<div>
<div class="col-xs-5">
<button translate class="btn btn-secondary" type="submit">Reset</button>
</div>
</div>
</div>
</form>
</div>
I have a email field in a form:
<div class="col-xs-4">
<label>mail</label>
<input
ng-required="vm.isMailReqired"
pattern="^(([^<>()\[\]\.,;:\s#\']+(\.[^<>()\[\]\.,;:\s#\']+)*)|(\'.+\'))#(([^<>()[\]\.,;:\s#\']+\.)+[^<>()[\]\.,;:\s#\']{2,})$"
class="form-control sgn-rounded_textbox"
name="emailBox"
ng-disabled="!vm.model.signAgreement"
ng-model="vm.model.emails.beitEsek">
</div>
In my controller vm.isMailReqired is set to false but still the emailBox.$invalid is true and as a result my form controller(formsToSign) is false - formsToSign.$valid:false.
EDIT - entire form
<form name="formsToSign" novalidate class="form-validation">
<div class="row">
<div class="col-xs-12 form-group">
<div class="col-xs-4">
<label>mail</label>
<input
ng-required="vm.isMailReqired"
pattern="^(([^<>()\[\]\.,;:\s#\']+(\.[^<>()\[\]\.,;:\s#\']+)*)|(\'.+\'))#(([^<>()[\]\.,;:\s#\']+\.)+[^<>()[\]\.,;:\s#\']{2,})$"
class="form-control sgn-rounded_textbox"
name="emailBox"
ng-disabled="!vm.isMailReqired"
ng-model="vm.model.emails.beitEsek">
</div>
<div class="col-xs-4">
<label>Secondary maik</label>
<input pattern="^(([^<>()\[\]\.,;:\s#\']+(\.[^<>()\[\]\.,;:\s#\']+)*)|(\'.+\'))#(([^<>()[\]\.,;:\s#\']+\.)+[^<>()[\]\.,;:\s#\']{2,})$"
dir= "ltr"
class="form-control sgn-rounded_textbox"
name="emailBox1"
input-change = "vm.mailField"
ng-model="vm.model.emails.emailField"
>
</div>
<div class="col-xs-4">
<label>Manger Mail</label>
<input pattern="^(([^<>()\[\]\.,;:\s#\']+(\.[^<>()\[\]\.,;:\s#\']+)*)|(\'.+\'))#(([^<>()[\]\.,;:\s#\']+\.)+[^<>()[\]\.,;:\s#\']{2,})$"
dir= "ltr"
class="form-control sgn-rounded_textbox"
name="emailBox2"
input-change = "vm.mailField"
ng-model="vm.model.emails.menahelEmailField"
>
</div>
</div>
</div>
<div class="row">
<div class="pull-left">
<!--Show this button when form is valid only -->
<button ng-class="{'invalidForm':( vm.buttonDisableValidation || formsToSign.$invalid)}" ng-disabled="vm.buttonDisableValidation || formsToSign.$invalid"
class="sgn_redBTN" ng-click="vm.showFormAndClose()">Show Forms</button>
</form>
Thanks for any help.
I've tailored your example with one input elements and made the fiddle and it is working without any
issues.
I guess the issue is with other input elements. Try to debug with {{formsToSign.$error}} to find the error
HTML
<div ng-controller="MyController as vm">
<form name="formsToSign" novalidate class="form-validation">
<div class="row">
<div class="col-xs-12 form-group">
<div class="col-xs-4">
<label>mail {{vm.isMailReqired}}</label>
<input ng-required="vm.isMailReqired" pattern="^(([^<>()\[\]\.,;:\s#\']+(\.[^<>()\[\]\.,;:\s#\']+)*)|(\'.+\'))#(([^<>()[\]\.,;:\s#\']+\.)+[^<>()[\]\.,;:\s#\']{2,})$" class="form-control sgn-rounded_textbox" name="emailBox" ng-disabled="!vm.isMailReqired"
ng-model="vm.model.emails.beitEsek" />
</div>
</div>
</div>
<div class="row">
<div class="pull-left">
<!--Show this button when form is valid only -->
<button ng-class="{'invalidForm':( vm.buttonDisableValidation || formsToSign.$invalid)}" ng-disabled="formsToSign.$invalid" class="sgn_redBTN" ng-click="vm.showFormAndClose()">Show Forms</button>
</div>
</div>
</form>
<p>
<b>{{formsToSign.$error}}</b>
</p>
</div>
JS
angular
.module('myApp', []);
angular
.module('myApp')
.controller('MyController', MyController);
MyController.$inject = [];
function MyController() {
var vm = this;
vm.isMailReqired = true;
}
$invalid
boolean
True if at least one containing control or form is invalid.
mail
()\[\]\.,;:\s#\']+(\.[^()\[\]\.,;:\s#\']+)*)|(\'.+\'))#(([^()[\]\.,;:\s#\']+\.)+[^()[\]\.,;:\s#\']{2,})$" class="form-control sgn-rounded_textbox" name="emailBox"ng-disabled="vm.model.signAgreement"ng-model="vm.model.emails.beitEsek">
Is there a way in angular js to push a list of managers(or any item) to an array with validation in angular. I basically want to create an array as the ng-model and still validate it. Is this possible to do or am i going about it the wrong way?
var app = angular.module("FormTest",[]);
app.controller("AppCtrl", ["$scope", function($scope){
var appCtrl = this;
appCtrl.appName = "Form Array";
$scope.managers = [""];
$scope.form = {};
$scope.form.managers = $scope.managers;
$scope.addManager = function(){
$scope.managers.push('');
}
$scope.removeManager = function(index){
if($scope.managers.length > 1){
$scope.managers.splice(index, 1);
}
}
}])
angular.element(document).ready(function(){
angular.bootstrap(document.querySelector('html'), ["FormTest"]);
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div ng-controller="AppCtrl as app">
<h2>{{app.appName}}</h2>
<div>
{{form.managers}}
<div>
<div>{{managers}}</div>
<div class="btn btn-primary" ng-click="addManager()">add manager</div>
</div>
</div>
<form novalidate name="form">
<div class="form-group" ng-repeat="item in managers track by $index">
<div class="row-fluid">
<div class="col-md-5">
<input type="text" ng-model="managers[$index]" ng-pattern="/\w{3,}/" required class="form-control">
</div>
<div class="col-md-1">
<div class="btn btn-default">
<span class="glyphicon glyphicon-remove-circle" ng-click="removeManager($index)"></span>
</div>
</div>
</div>
</div>
</form>
</div>
In your example, all right, except for that of the regular expression.
Look at the example code jsfiddle.
<h2>{{app.appName}}</h2>
<div>
{{form.managers}}
<div>
<div>{{managers}}</div>
<button class="btn btn-primary" ng-click="addManager()">add manager</button>
</div>
</div>
<form novalidate name="form">
Form valid={{form.$valid|json}}
<div class="form-group" ng-repeat="item in managers track by $index">
<div class="row-fluid">
<div class="col-md-5">
<input type="text" ng-model="managers[$index]" name="manager{{$index}}" ng-pattern="/^\w{3,}$/" required class="form-control">
{{form['manager'+$index].$error}}
</div>
<div class="col-md-1">
<div class="btn btn-default">
<button class="glyphicon glyphicon-remove-circle" ng-click="removeManager($index)">Remove</button>
</div>
</div>
</div>
</div>
</form>
Here is my HTML:
<form role="form" ng-submit="submit()">
<div class="form-group">
<div class="radio" ng-repeat="answer in answers">
<label>
<input type="radio" name="answer" ng-model="submittedAnswer" value="{{$index}}" /> {{ answer }}
</label>
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">Далее</button>
</div>
</form>
And in angular controller I have this code:
$scope.submittedAnswer = 0;
$scope.submit = function () {
answers.push($scope.submittedAnswer);
console.log($scope.submittedAnswer);
}
On submit I'm always getting 0. It seems that problem only about radiobutton. I've tried to bind model to simple text input and all worked fine. Any suggestions? BTW, is there any way to avoid initializing of model (I don't want any radiobutton to be checked initially)?
You have to use $parent inside the ng-repeat model to bind your model.
var myapp = angular.module('myApp',[]);
myapp.controller('myController', function($scope){
$scope.answers = ['One','Two','Three'];
$scope.submit = function(){
console.log($scope.submittedAnswer);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="myController">
<form role="form" ng-submit="submit()" ng-init="submittedAnswer = 0">
<div class="form-group">
<div class="radio" ng-repeat="answer in answers">
<label>
<input type="radio" name="answer" ng-model="$parent.submittedAnswer" value="{{$index}}" /> {{ answer }}
</label>
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">Далее</button>
</div>
</form>
</div>
</div>
This is the exact reading you need to understand why. https://github.com/angular/angular.js/wiki/Understanding-Scopes#javascript-prototypal-inheritance