Icontem

ng-forms: Module to handle forms with Angular.js

Recommend this page to a friend!
  Info   View files Documentation   View files View files (2)   DownloadInstall with Composer Download .zip   Reputation   Support forum (3)   Blog    
Last Updated Ratings Unique User Downloads Download Rankings
2017-06-30 (4 months ago) RSS 2.0 feedNot enough user ratingsTotal: 56 All time: 479 This week: 11Up
Version License JavaScript version Categories
ng-forms 1.0Freeware5AJAX, Forms
Collaborate with this project Author

ng-forms - github.com

Description

This package is a module to handle forms with Angular.js.

It attaches to forms so it can handle form events with given callback functions.

It handles form submission with AJAX and handles success or error conditions with builtin helpers or given custom error callback functions.

Name: Harcharan Singh <contact>
Classes: 4 packages by
Country: India India
Age: 25
All time rank: 11010 in India India
Week rank: 29 Up3 in India India Up
Innovation award
Innovation award
Nominee: 2x

Details

ng-forms

Form Handler for angular js

Requirements

angular 1.6

Note: for angular 1.5 switch to version 1.3 branch

Usage

var myApp = angular.module('myApp', ['ngRoute', 'ngForms']);


$scope.form = {};

$scope.signin = $ngForm.create({

        url: 'login',
        method: 'post',
        scope: $scope, 
        path: 'form',
        multipart: false // optional, make it true in case of file upload

    }, {

        success: function (o) {

        }

    });
    

  <form class="login-form">
      <h1>Login to your account</h1>

      <div  uib-alert  close="dismiss()"  ng-hide="form.response.alert.class == undefined" class="alert alert-{{form.response.alert.class}}">{{form.response.alert.text}}</div>
        
      <div class="form-group" ng-class="{'has-error': form.response.hasError('email')}">
              <label for="inputEmail" class="sr-only">Username or Email</label>
              <input  ng-model="form.username" type="text" id="inputEmail" class="form-control" placeholder="Username or Email" required autofocus>
              <div class="help-block">{{form.response.error('email')}}</div>
      </div>
      
      <div class="form-group" ng-class="{'has-error': form.response.hasError('email')}">
              <label for="inputPassword" class="sr-only">Password</label>
              <input  ng-model="form.password" type="password" id="inputPassword" class="form-control" placeholder="Password" required>
              <div class="help-block">{{form.response.error('email')}}</div>
      <div>
      <div class="checkbox">
        <label>
          <input type="checkbox" value="remember-me" ng-model="form.remember"> Remember me
        </label>
      </div>
      <button class="btn btn-primary btn-block" type="submit"  ng-click="signin.handle()">Sign in</button>
    </form>

ng-forms is built especially for laravel developers


// Laravel validations
$validation = Validator::make($request->all(), $rules);

if ($validation->fails()) {
	return ['success' => false, 'errors' => $validation->errors()];
}

Note: dismiss function will hide alert. directly bind to some button or use in angular-ui close attribute

Ver:1.2 - 2 functions added for error handling (hasError() and error() in server response object)

  Files folder image Files  
File Role Description
Plain text file ng-forms.js Class Class source
Accessible without login Plain text file README.md Doc. Documentation

 Version Control Unique User Downloads Download Rankings  
 100%
Total:56
This week:0
All time:479
This week:11Up
User Comments (2)
Great
11 months ago (Parshant2111)
70%StarStarStarStar
best package
1 year ago (Nitin Mehra)
70%StarStarStarStar