In this Angular FormData tutorial , we will understand how to use Angular 8 HttpClient API to Post FormData to a web server. Forms are an essential part of any web or mobile applications, and Forms allow us to gather data from the users and send that data to the webserver.
We are going to learn about the FormData object and how to use it in an Angular application. Its a JavaScript object, which allows us to develop a set of key/value data structure representing form fields and their respective values.
In this step by step article, we will take the help of Angular 8 HttpClient API to send FormData to a web server by using the Http POST method.
Table of contents
- FormData Methods
- Angular 8 FormData Tutorial with Example
- Set up Angular App
- Build Form with Reactive Forms and Bootstrap 4
- POST FormData with Angular HttpClient API
- Conclusion
FormData Methods
You can initialize FormData object by creating an instance from new FormData interface as given below.
const formData = new FormData()
FormData Methods
Once the FormData instance is created then there are various methods available through FormData, which allows you to manage the data as per your requirement.
| Methods | Description |
|---|---|
| FormData.append() | It includes a new value on a pre-existing key within a FormData object. If the key already exists, then the value will be added to that key without removing the first key. |
| FormData.delete() | It deletes a key and value pair from the FormData object. |
| FormData.entries() | FormData returns an iterator which allows looping over a set of key-value pair presenting in the object. |
| FormData.get() | It returns the value associated with a given set of a key from the FormData object. However, if more values appended, then it will return the first value. |
| FormData.getAll() | Returns all the values associated with a key from the FormData object. |
| FormData.has() | It returns true if the key exists in FormData object. |
| FormData.keys() | Returns an iterator which allows looping over all the keys of the key-value data structure in this object. |
| FormData.set() | It is used to set the value into the FormData object with the particular key. Value is replaced if a key already exists in the FormData object. |
| FormData.values() | Returns an iterator which allows looping over all the values existing in this object |
Top comments (0)