Angular 1.x and Angular2 Blog: Javascript

Showing posts with label Javascript. Show all posts

Monday, 6 June 2016

Disable the Form submit button untill all required fields are filled in form using Angular js

In this post we are going to see how to disable the submit button in form up to all required fields are filled in form using angular js.

Already Angular Js have one option to do this by using the formname.$Invalid check with ng-disabled, But this option is not working as Expected for me, may be some bug in angular js. so I implemented my own implementation of directive check which will do the same functionality for us.

First the functionality that required for us

1. Form should have user name and password
2. Form submit button should be disbaled , up to all required fields are filled with valid value.
3. Enable the submit button when all fields are filled with correct value.

Angular directive:
*********************

</form>

Our sample HTML5 code will look like above code, Form tag have a button inside that a custom directive validate-invalid is placed in form tag, this is our directive which will let you that submit button is enabled or disabled by placing the property of ng-disabled="!form.enableSubmit" in button tag

So let we see our custom directive code .

var mainApp = angular.module('mainApp', []);

mainApp.directive('validateInvalid', function () {

return {

restrict: "A",

link: function (scope, element, attrs) {

if (scope.form == undefined)

scope.form = {};

element.addClass('ng-invalid');

scope.form.enableSubmit = false;

scope.$watch(function () {

return element.attr('class');

}, function (val) {

var valid = true;

var classes = val.split(" ");

angular.forEach(classes, function (classname) {

if (classname == "ng-invalid") {

valid = false;

}

});

if (valid)

scope.form.enableSubmit = true;

else

scope.form.enableSubmit = false;

});

}

});

At the first time application launch, Submit button is in disabled state, then further user changes in the form fields it will enable the Submit button, and makes the user to submit there credentials to the server to Login.

At Load:

At some input:

After all Required Fields filled with valid values.

This Post makes you to understand how to make a Login form with automatic submit button disabled and enabled based on attributes.

Create a custom Service in Angular Js

In this post we are going to see how to create a service in Angular Js. Service is a singleton object in Anguar, it is created and managed by Angular Dependency Injection.

app.service('DBService', function () {

this.ConnectionString = function () {

return "DataSource=123.23.2.11;Username=rajesh;Password=pass12*";

}

this.Login = function (username, password) {

if (username == "Rajesh") {

return true;

}

else {

return false;

}

});

var app = angular.module('app', []);

app.controller('main', function ($scope, DBService) {

$scope.Title = "Sample Angular Application";

$scope.Cstring = DBService.ConnectionString();

});

<html>

<head>

</head>

<body>

<h1>{{Title}}</h1>

<br />

<span> Connection String from Service: {{Cstring}} </span>

<br />

</div>

</body>

</html>

from this post you can learn how to create a service in angular js.

Sunday, 5 June 2016

Model binding in Angular js

In this post we are going to see how to use the angular js for model binding. First download the angular js from the official website

var app = angular.module('app', []);

app.controller('main', function ($scope) {

$scope.Title = "Sample Angular Application";

});

<html>

<head>

</head>

<body>

<h1>{{Title}}</h1>

<div>

</div>

</body>

</html>

in this sample you can see the model Title is binded with the html view using a double curly braces, and also you can see the model name which under goes two way binding using ng-model, it is coupled with a textbox , so every time whenever there is a change takes place in the Textbox it is changes the value of model name , we can see the changes in the label also, Angular Render the view of label, when ever name changes, another thing here we are not declare the model name in the controller, but it is automatically creates in the scope by the ng-model.

Detail analysis of Chutzpah test runner for Test Driven Development in visual studio for Angular applications

In this post we will discuss about some detail analysis of Chutzpah test runner, which will run the unit test case for angular applications.

This is based on the previous post reference
http://angular2js.blogspot.in/2016/06/configure-visual-studio-2015-for-test.html

As we see in the previous post we are referencing a some js files in the Test.js file, because mock file specifying the Dependencies, now how the test runner know Jasmine Framework, Where it is specified ? How the Dynamic Html is created while debugging or running the tests.

We already installed the JasmineTest using package manager console, because of this we have a controller, Views, Some Jasmine Js in our project . but it is not actually played role while testing. Now we see it in detail, below is the controller code

Unit Test Code

Now when we start debug the unit test in visual studio, Chutzpah run a dynamic Html in Browser, when we see the Resources of the Page it is clearly shows that the dependencies are loaded which are mentioned in comment and also some other Jasmine files are also loaded in application, but it loads from AppData instead of from project, so Jasmine is loaded from Global.

see the structure of the Spec test runner for Chutzpah. Sequence of Loading the Scripts for Testing.
You can see the Files which are require to test the file other than the dependencies what we specified it is injected by test runner.

Jasmine.css
Jasmine.js
Jasmine-html.js
boot.js

This post may be give the detail analysis of Chutzpah Test Runner for Unit testing the Angular Applications in Visual Studio

Run the Unit testing of Angular Applications in Visual studio Test Explorer using Chutzpah Test Adapter

In this post we are going to see how to run the test cases in the Visual Studio Test Explorer using Chutzpah Test Adapter.

Before proceeding with this please refer the following link to install the Jasmine and Chutzpah Test Runner in your applications (Visual Studio) we have to do the following steps before install the chutzpah test adapter for running the applications in chutzpah test runner.

How to install and Configure the Chutzpah test runner in Visual studio

First to do this we have to install the extension of Chutzpah Test Adapter for visual studio. Already i had installed the chutzpah test runner which is used to run the Js for Testing.

Visual Studio : Tools - > Extensions and Updates -> Type Chutzpah in search

we can see in the above image that Test Runner is already installed, after installing the Chutzpah restart the application, Now give a Rebuild or build in the Visual studio then only applications are get updated. Now Go to View -> TestExplorer and click it. You can see Test explorer updated with some tests, now click Run all.

App Code:

Test Code:

Test Explorer

In the above images it shows more cases are failed, but we had written the 6 test cases, then why so many cases are listed it is because of _references.js, this file have the entry of each js, so when test explorer scans this file it haves our test file also so again the Test file is scanned for testing , for that location it will give error for all test cases so remove the Test File js entry from the _reference.js, Now again Give Build in Solution, we can get the updated test cases now.

above image shows the correct test cases , now click Run all , This will run the test cases, Now we have one issue , a Test case is failed, so we are going to see the details in the Details section. Below image have the detail explanation of test case error. That the expected value is wrong is the issue

From this post you can see how to run the test cases in test explorer of Visual studio using the Chutzpah Test Adapter. By this way you can enable the UI for testing the test cases of Angular Applications. In the Later Post we will see how to test the Applications using Karma JS.