AngularJS term length check - angularjs

I will fetch User from the backend and therefore I will give in a name into an input field and then the Controller Method getUserByTerm will be invoked.
This works fine.
My question now would be, if the implementation is ok or is there an additional support of Angular that makes it easier? Currently the if(term.length > 3) looks very "Javascript- like".
Thanks for help!
angular
.module('project.management')
.controller('ManagementController', ManagementController);
function ManagementController() {
var vm = this;
vm.getUsersByTerm = getUsersByTerm;
function getUsersByTerm(term) {
if(term.length > 3) {
alert('get User By term: ' + term);
}
}
};
<div ng-controller="ManagementController as vm">
<form class="well form-search">
<label>Usersuche:</label>
<input type="text" ng-change="vm.getUsersByTerm(term)" ng-model="term" class="input-medium search-query" placeholder="Username">
<button type="submit" class="btn" ng-click="vm.getUsersByTerm(term)">Suchen</button>
</form>
<pre ng-model="result">
{{result}}
</pre>
</div>

You can add ng-maxlength="3" to your input and submit only if form is valid (https://docs.angularjs.org/api/ng/input/input%5Btext%5D)
Although, your code is quite simple and this might not be required.
<form class="well form-search" ng-submit-"vm.getUsersByTerm(term)">
<label>Usersuche:</label>
<input type="text" ng-change="vm.getUsersByTerm(term)"
ng-model="term" ng-maxlength="3" class="input-medium search-query" placeholder="Username">
<button type="submit" class="btn">Suchen</button>
</form>

Related

How to display error message when passwords doesn't match in Angularjs?

I'm new at Angularjs and my question is how to display an error message when the password doesn't match with confirm password?
Can someone help me, this is not very difficult but I'm still learning to programme.
Thanks to everyone!
I have html code:
<form ng-submit="saveItem(userForm.$valid)" name="userForm">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="database_address">User</label>
<input type="text" class="form-control" required ng-model="activeItem.username" placeholder="Потребителско Име..." />
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="text" class="form-control" id="password" ng-model="activeItem.passwordString" />
</div>
<div class="form-group">
<label for="password">Confirm Password</label>
<input type="text" class="form-control" id="password" ng-model="activeItem.passwordConfirm" />
</div>
<p ng-show="(userForm.passwordConfirm != '') && (userForm.password != userForm.passwordConfirm)">Passwords don't match</p>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="username">Operator</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">Save</button>
<!--<button class="btn btn-primary" ng-disabled="userForm.$invalid" type="submit">Добавяне на нов</button>-->
</form>
And angular function:
$scope.saveItem = function(){
console.log($scope.activeItem);
//delete $scope.activeItem.hash_method
var objectToSave = {
username: $scope.activeItem.username,
//password: $scope.activeItem.password,
name: $scope.activeItem.name,
id: $scope.activeItem.id
};
if($scope.activeItem.passwordString != ''){
if($scope.activeItem.passwordString == $scope.activeItem.passwordConfirm){
objectToSave.password = $scope.activeItem.passwordString;
} else {
console.log('Confirm password error');
}
}
You'll want to keep different Id's for the two password fields, also take a look at your model bindings:
<input type="text" class="form-control" id="password" ng-model="activeItem.passwordString" />
<input type="text" class="form-control" id="passwordConfirm" ng-model="activeItem.passwordConfirm" />
You can just reference the items that are bound with ng-model within an ng-if/ng-show, and then you shouldn't need any custom logic on the back-end.
<p ng-show="(activeItem.passwordString && activeItem.passwordConfirm) && activeItem.passwordString
!== activeItem.passwordConfirm ">Passwords don't match</p>
Also, you'll probably want to use '!==' over '!=' since you're just comparing two strings, as it's more strict of a comparison.
Edit: one thing to note, with this direction you'll still probably want to do error checking in the save function, but this should handle displaying the error message without any issues.
Remember the operator for 'not equal' is "!==", with that you will be able to make it!

Disable the Button from frontEnd

I'm trying to disable a button using AngularJS
<button
type="submit"
ng-disabled="emailConfig.$invalid"
ng-click="createEmailconfig()"
class="btn-sm btn btn-info waves-effect waves-light newbtn hvr-glow box-shadow-3 gradientbg"
name="submit"
id="submit"
>
<span class="btn-label"><img src="images/icon/submit.png" style="height: 18px;">
</span>Submit
</button>
If the form is invalid or a specific length isn't met, the button should be disabled. However, it's not working as it's supposed to.
Can someone help me out?
all you need to do is add ng-maxlength directive to the input fields and the form will be disabled with your current code, checkout this basic working example!
var app = angular.module('myApp', []);
app.controller('MyController', function MyController($scope) {
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-controller='MyController' ng-app="myApp">
<form action="" name="emailConfig" novalidate>
<input name="input" ng-model="userType" ng-maxlength="5" required>
<button type="submit" ng-disabled="emailConfig.$invalid" ng-click="createEmailconfig()" class="btn-sm btn btn-info waves-effect waves-light newbtn hvr-glow box-shadow-3 gradientbg" name="submit" id="submit">
<span class="btn-label"><img src="images/icon/submit.png" style="height: 18px;">
</span>Submit
</button>
</form>
</div>
some addition to #Naren Murali answer
You have no ng-model and inputs in your example.
You can validate a field using the required attribute and ng-model.
Using ng-model:
<div ng-controller='MyController' ng-app="myApp">
<form action="" name="emailConfig" novalidate>
<label>validation: <input type="text" ng-model="modelName" ng-minlength="4" required></label>
<button ng-model="button" ng-disabled="modelName.$invalid">Button</button>
</form>
</div>
note: Set the novalidate attribute on the form-tag so the default HTML5 validation gets overwritten by Angular in your app.
You can validate a form using the required attribute and the form name.
For your example:
<div ng-controller='MyController' ng-app="myApp">
<form action="" name="emailConfig" novalidate>
<label>validation: <input type="text" ng-model="modelName" ng-minlength="4" required></label>
<button type="submit" ng-disabled="emailConfig.$invalid" ng-
click="createEmailconfig()" class="yourClass" name="submit" id="submit">Submit</button>
</form>
</div>

AngularJS validations in .NET CSHTML files

My angularjs validation in .NET MVC cshtml files isnt working.
Below is my code:
cshtml code:
<div id="addEditItem" class="modal" role="dialog">
<form novalidate role="form" name="frmItem">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Add Item Details</h4>
</div>
<div class="modal-body">
<input type="hidden" class="form-control" ng-model="id">
<div class="form-group">
<label for="name">Name:</label>
<input type="text" class="form-control" id="name" ng-model="name" maxlength="50" ng-required="true">
<span style="color:red" class="help-block" ng-if="frmItem.name.$error.required && frmItem.name.$dirty">*</span>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-close"></i> Close</button>
<button type="submit" class="btn btn-success" ng-click="SaveItem()"><i class="fa fa-save"></i> Submit</button>
</div>
</div>
</div>
</form>
</div>
Controller Code:
medApp.controller("itemController", function ($scope, itemService) {
$scope.SaveItem = function () {
var itemModel = {
Id: $scope.id,
Name: $scope.name,
Description: $scope.description,
Manufacturer: $scope.manufacturer,
BatchNo: $scope.batchNo,
ExpiryDate: $scope.expiryDate
};
if (!CheckIsValid()) {
alert('Please fill the detail!');
return false;
}
var requestResponse = itemService.AddEdit(itemModel);
Message(requestResponse);
};
function CheckIsValid() {
var isValid = true;
if ($('#name').val() === '' || $('#description').val() === '' || $('#manufacturer').val() === '' || $('#batchNo').val() === '') {
isValid = false;
}
return isValid;
}
});
The addEditItem is a modal dialog. If I click on submit the alert('Error in getting records'); is shown.
I want the validation to happen at cshtml level rather than the java alert.
I am going to remove the CheckIsValid function. I want the validation to happen only in cshtml file.
Any idea what's going on?
In your attached cshtml code I could find the "name" id only, but your check function is also checking"description", "manufacturer" and "batchNo". All of those item must be exist otherwise the function returns with false.
The CheckIsValid() function will return true when all items exists and contains at least one character. Anyway the good start is to put a breakpoint into your check code and see why returns with false.
Wordking fiddle
<form name="myForm">
<input type="hidden" class="form-control" ng-model="id">
<div class="form-group">
<label for="name">Name:</label>
<input type="text" class="form-control" name="name" ng-model="name" maxlength="50" ng-required="true">
<span style="color:red" class="help-block" ng-show="myForm.name.$error.required && !myForm.name.$valid">*</span>
</div>
<button ng-click="display()">Log</button>
</form>
Would like to add that you need to add:
Use name on inputs to be accesable from the scope
Use ng-show/ng-hide for validation since it changes alot

AngularJS validation show validation msg on submit [duplicate]

This question already has answers here:
show validation error messages on submit in angularjs
(13 answers)
Closed 7 years ago.
I am dynamically adding fields and want "required" validation on each field I add.
Problem is angular validates these fields before i submit.
<form name="outerForm">
<div ng-repeat="item in items">
<data-ng-form name="innerForm">
<input type="text" placeholder="{{item.questionPlaceholder}}" name="fieldU" ng-model="item.question" required>
<span class="error" ng-show="innerForm.fieldU.$error.required">
Required!
</span>
<input type="text" name="userName" placeholder="enter text..." ng-model="item.text" required>
<span class="error" ng-show="innerForm.userName.$error.required">
Required!
</span>
</data-ng-form>
</div>
<input type="submit" ng-click="save(items)" ng-disabled="outerForm.$invalid" />
<button ng-click="add()">New Field</button>
</form>
here is fiddle
https://jsfiddle.net/Lbw6ow8k/7/
I want required msg only to show when user did not add anything to text box and after he/she clicked submit
I'd love to maintain one scope variable which will keep a track that form is submitted or not
HTML
<div ng-app="myApp" ng-controller="myCtrl">
<form name="outerForm" ng-init="submitted=false" novalidate="">
<div ng-repeat="item in items">
<data-ng-form name="innerForm">
<input type="text" placeholder="{{item.questionPlaceholder}}" name="fieldU" ng-model="item.question" required/>
<span class="error" ng-show="$parent.submitted&& innerForm.fieldU.$error.required">
Required!
</span>
<input type="text" name="userName" placeholder="enter text..." ng-model="item.text" required/>
<span class="error" ng-show="$parent.submitted && innerForm.userName.$error.required">
Required!
</span>
</data-ng-form>
</div>
<input type="submit" ng-click="submitted=true;save(items)" ng-disabled="submitted && outerForm.$invalid" />
<button ng-click="add()">New Field</button>
</form>
Items: {{items}}
</div>
Working Fiddle
You can create a $scope.isSubmit variable to detect whether the form has submitted or not:
Controller:
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
$scope.save = function (question) {
$scope.isSubmit = true; // Will be true if the form has submitted
console.log(question)
}
$scope.items = [];
$scope.add = function () {
if ($scope.items.length >= 10) {
toastr.warning("Only 10 fields are allowed");
} else {
$scope.items.push({
//inlineChecked: false,
question: "",
questionPlaceholder: "foo",
text: ""
});
}
};
});
View:
<div ng-app="myApp" ng-controller="myCtrl">
<form name="outerForm" novalidate>
<div ng-repeat="item in items">
<data-ng-form name="innerForm">
<input type="text" placeholder="{{item.questionPlaceholder}}" name="fieldU" ng-model="item.question" required> <span class="error" ng-show="innerForm.fieldU.$error.required && isSubmit">
Required!
</span>
<input type="text" name="userName" placeholder="enter text..." ng-model="item.text" required> <span class="error" ng-show="innerForm.userName.$error.required && isSubmit">
Required!
</span>
</data-ng-form>
</div>
<input type="submit" ng-click="save(items)" />
<button ng-click="add()">New Field</button>
</form>Items: {{items}}</div>
So, I deleted the ng-disable in the button in order to make the submit button clickable even though the form isn't correct. Moreover, you should add novalidate into the form tag to disable the default form validation from HTML5.
Here is the full source code on JsFiddle.

Angularjs two way binding is not working

I’m trying to log variable which is the model of inputbox, but it says undefined, here is the coffeescript code.
.controller('setupCtrl',[
'$scope'
($scope) ->
$scope.userAge = [{age: ''}]
console.log 2342424
$scope.addAge = ->
console.log($scope.age)
])
This is the HTML code
<form role="ageForm" data-ng-submit="addAge()" >
<div class="form-group">
<input type="text" ng-model="age" class="form-control" placeholder="Age" required>
</div>
{{input}} butona koyup data-ng-click dene istersen
<button type="submit" ng-click="addAge()">sdsadsdSave</button>
</form>
It says undefined for $scope.age
It looks like ng-model => userAge.age not age only
<form role="ageForm" data-ng-submit="addAge()" >
<div class="form-group">
<input type="text" ng-model="userAge.age" class="form-control" placeholder="Age" required>
</div>
{{input}} butona koyup data-ng-click dene istersen
<button type="submit" ng-click="addAge()">sdsadsdSave</button>
</form>
$scope.addAge = ->
console.log($scope.userAge.age)

Resources