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    
Ratings Unique User Downloads Download Rankings
Not enough user ratingsTotal: 58 All time: 489 This week: 4Up
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.

Picture of Harcharan Singh
Name: Harcharan Singh <contact>
Classes: 4 packages by
Country: India India
Age: 30
All time rank: 11011 in India India
Week rank: 6 Up1 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:58
This week:0
All time:489
This week:4Up
User Comments (2)
Great
5 years ago (Parshant2111)
70%StarStarStarStar
best package
6 years ago (Nitin Mehra)
70%StarStarStarStar