https://github.com/doublinglee10/ngx-ourpalm-form

Angular 2 Port for the Jquery Form http://malsup.com/jquery/form/
https://github.com/doublinglee10/ngx-ourpalm-form

ajaxform ajaxsubmit form jquery ng2 ng4

Last synced: 6 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/doublinglee10/ngx-ourpalm-form
• Owner: doublinglee10
• Created: 2017-06-26T06:50:23.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2017-11-28T08:11:55.000Z (almost 7 years ago)
• Last Synced: 2024-04-26T18:23:12.535Z (7 months ago)
• Topics: ajaxform, ajaxsubmit, form, jquery, ng2, ng4
• Language: TypeScript
• Homepage:
• Size: 33.2 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

README

        
# NgxOurpalmForm

Angular 2 Port for the Jquery Form [http://malsup.com/jquery/form/](http://malsup.com/jquery/form/)

## Installation

```

npm install ngx-ourpalm-form --save

```

## Example

import the `OurpalmFormModule` module in your application module

```javascript

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

@NgModule({

    imports: [OurpalmFormModule]

})

```

```javascript

// 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);

      }

    });

  }

}

```

```xml

// app.component.html

    

    

    

    submit

```

or

```xml

    

    

    

    submit

```

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.

```javascript

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

@Component({

    selector:'my-app',

    template:'
Component Template
'

})

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](./src/app/test-ajax-form/ajax-form.component.ts)

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