NgxOurpalmForm

Angular 2 Port for the Jquery Form http://malsup.com/jquery/form/

Installation

npm install ngx-ourpalm-form --save

Example

import the OurpalmFormModule module in your application module

import { OurpalmFormModule } from "ngx-ourpalm-form";

@NgModule({
    imports: [OurpalmFormModule]
})

// app.component.ts
import { Component } from '@angular/core';
import { OurpalmFormComponent } from "ngx-ourpalm-form";

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html'
})
export class AppComponent {

  @ViewChild(OurpalmFormComponent) form: OurpalmFormComponent;

  submitForm() {
    this.form.ajaxSubmit({
      url: 'http://hostname:port/path/xxx',
      success: (result) => {
          console.info(result);
      },
      error: (result) => {
        console.info(result);
      }
    });
  }
}

// app.component.html
<form ourpalm-form>
    <input type="text" name="username"/>
    <input type="text" name="password"/>
    <input type="file" name="file"/>
    <button (click)="submitForm()">submit</button>
</form>

or

<form ourpalm-form #form action="http://hostname:port/path/xxx" method="post" enctype="multipart/form-data">
    <input type="text" name="username"/>
    <input type="text" name="password"/>
    <input type="file" name="file"/>
    <button (click)="form.submitForm()">submit</button>
</form>

You can pass global settings that can be overloaded by the options object in the OurpalmFormComponent instances. Use the OurpalmFormConfig service to do so. The service provider is set in the OurpalmFormModule module.

import { OurpalmFormConfig } from 'ngx-ourpalm-form';

@Component({
    selector:'my-app',
    template:'<h3>Component Template</h3>'
})
export class AppComponent {

    constructor(private config: OurpalmFormConfig) {
        this.config.options = {
            xhrFields: {
                withCredentials: true
            }
        };
    }
}

Method

| method | param | desc | |-------------------------|-------------------|-------------------------------------------------| | formSerialize | | Serializes the form into a query string. This method will return a string in the format: name1=value1&name2=value2 | | fieldSerialize | cssSelector | Serializes field elements into a query string | | fieldValue | cssSelector | Returns the value(s) of the element(s) in the matched set in an array | | resetForm | | Resets the form to its original state by invoking the form element's native DOM method. | | clearForm | | Clears the form elements. | | clearFields | cssSelector | Clears field elements. | | ajaxSubmit | options | Immediately submits the form via AJAX. | | ajaxForm | options | Prepares a form to be submitted via AJAX by adding all of the necessary event listeners. It does not submit the form. |

demo

Below is the link to the original project, there's more info regarding the jquery form there. http://malsup.com/jquery/form/