# Handling Form Field Data in Angular Applications > The Document Viewer in Angular can be used to fill form fields in documents. In this article, we will show how to handle the filled form field data in Angular applications. - **Author:** Bjoern Meyer - **Published:** 2024-03-27 - **Modified:** 2025-11-16 - **Description:** The Document Viewer in Angular can be used to fill form fields in documents. In this article, we will show how to handle the filled form field data in Angular applications. - **4 min read** (697 words) - **Tags:** - Angular - ASP.NET Core - Document Viewer - Forms - **Web URL:** https://www.textcontrol.com/blog/2024/03/27/handling-form-field-data-in-angular-applications/ - **LLMs URL:** https://www.textcontrol.com/blog/2024/03/27/handling-form-field-data-in-angular-applications/llms.txt - **LLMs-Full URL:** https://www.textcontrol.com/blog/2024/03/27/handling-form-field-data-in-angular-applications/llms-full.txt --- In a recent [blog post](https://www.textcontrol.com/blog/2024/03/25/preparing-forms-for-the-document-viewer-and-customizing-the-signing-process-in-angular-and-asp-net-core/llms-full.txt), we explained how to prepare the form field data from the completed form fields and how to handle it when a document is being electronically signed. However, the Document Viewer can also be used to deploy forms so that end users can fill them out without having to sign the document. In this article, you will learn several strategies for retrieving form data after the user has completed the form. ### The Document In this article, the same template will be used as in the previous article mentioned above, but without the signature field. In addition, a field is made mandatory by using the form field conditional instructions. ![Form Fields in Angular](https://s1-www.textcontrol.com/assets/dist/blog/2024/03/27/a/assets/template.webp "Form Fields in Angular") When this document is loaded into the Document Viewer, the required field is automatically highlighted in red if it is not valid. ![Form Fields in Angular](https://s1-www.textcontrol.com/assets/dist/blog/2024/03/27/a/assets/angular1.webp "Form Fields in Angular") ### Form Field Validation: Saving Data Values When the user has completed the form, the form field data can be retrieved using the *forms.getValues* method. This method returns an array of *CompletedFormField* objects. Each object contains the form field data, including the field name, value, and type. When you click on the *Save Values* button, the following code will be executed. ``` saveValues() { var documentValidated = TXDocumentViewer.forms.validate(); if (!documentValidated) { alert('Document is not valid!'); return; } var formFieldValues = TXDocumentViewer.forms.getValues(); console.log(formFieldValues); this.http.post('/document/saveValues', formFieldValues).subscribe( (result) => { console.log(result); } ); } ``` First, the form is validated. If all of the fields are valid, the data from the form fields will be retrieved and then sent to an http post endpoint for further processing. ### Saving the Document If you want to embed the form values into the document and merge the values into form fields, you can use the *saveDocument* method. The following code saves the document in the internal TX Text Control format after validating the form fields. The *saveDocument* method returns a *DownloadDocumentResult* object with asynchronous functions to retrieve the document as a base64-encoded string or as an ArrayBuffer. The base64-encoded string is then retrieved using the *base64* method. ``` async saveDocument() { var documentValidated = TXDocumentViewer.forms.validate(); if (!documentValidated) { alert('Document is not valid!'); return; } const saveSettings = { mergeFormFields: true, embedAnnotations: false }; const result = await TXDocumentViewer.saveDocument( TXDocumentViewer.StreamType.InternalUnicodeFormat, saveSettings); const base64 = await result.base64(); console.log(base64); this.http.post('/document/saveDocument', { document: base64, name: this.documentData.name }).subscribe( (result) => { console.log(result); } ); } ``` After the document is saved, it is forwarded to an endpoint to save the document to the server. In the server-side endpoint, you can load the generated document into a ServerTextControl instance to access the form field values. ``` [HttpPost] [Route("SaveDocument")] public bool SaveDocument([FromBody] DocumentData documentData) { using (var tx = new ServerTextControl()) { tx.Create(); tx.Load(Convert.FromBase64String(documentData.Document), BinaryStreamType.InternalUnicodeFormat); foreach (FormField formField in tx.FormFields) { // access the form field data } } return true; } ``` ### Flattening the Form Fields When the form fields are no longer required, you can flatten the form fields to make the document read-only. The following code flattens the form fields after the form data has been saved. ``` [HttpPost] [Route("SaveDocument")] public bool SaveDocument([FromBody] DocumentData documentData) { using (var tx = new ServerTextControl()) { tx.Create(); tx.Load(Convert.FromBase64String(documentData.Document), BinaryStreamType.InternalUnicodeFormat); FlattenFormFields(tx); tx.Save("App_Data/results.pdf", StreamType.AdobePDF); } return true; } ``` ``` private void FlattenFormFields(ServerTextControl textControl) { int fieldCount = textControl.FormFields.Count; for (int i = 0; i < fieldCount; i++) { TextFieldCollectionBase.TextFieldEnumerator fieldEnum = textControl.FormFields.GetEnumerator(); fieldEnum.MoveNext(); TXTextControl.FormField curField = (TXTextControl.FormField)fieldEnum.Current; textControl.FormFields.Remove(curField, true); } } ``` The following screenshot shows the flattened PDF document: ![Flattened Form Fields in Angular](https://s1-www.textcontrol.com/assets/dist/blog/2024/03/27/a/assets/angular2.webp "Flattened Form Fields in Angular") ### Conclusion Using the Document Viewer in Angular, you can easily handle form field data in documents. The *getValues* method retrieves the form field data, and the *saveDocument* method saves the document with the form field data. --- ## About Bjoern Meyer As CEO, Bjoern is the visionary behind our strategic direction and business development, bridging the gap between our customers and engineering teams. His deep passion for coding and web technologies drives the creation of innovative products. If you're at a tech conference, be sure to stop by our booth - you'll most likely meet Bjoern in person. With an advanced graduate degree (Dipl. Inf.) in Computer Science, specializing in AI, from the University of Bremen, Bjoern brings significant expertise to his role. In his spare time, Bjoern enjoys running, paragliding, mountain biking, and playing the piano. - [LinkedIn](https://www.linkedin.com/in/bjoernmeyer/) - [X](https://x.com/txbjoern) - [GitHub](https://github.com/bjoerntx) --- ## Series - [MailMerge with Angular and ASP.NET Core](https://www.textcontrol.com/blog/2024/03/15/mailmerge-with-angular-and-asp-net-core/llms.txt) - [How to Add Electronic and Digital Signatures to PDFs in ASP.NET Core C# and Angular](https://www.textcontrol.com/blog/2024/03/20/how-to-add-electronic-and-digital-signatures-to-pdfs-in-asp-net-core-c-sharp-and-angular/llms.txt) - [Document Viewer for Angular: SignatureSettings Explained](https://www.textcontrol.com/blog/2024/03/20/signaturesettings-explained/llms.txt) - [Asynchronous Loading and Saving in Angular Document Editor with an ASP.NET Core Web API](https://www.textcontrol.com/blog/2024/03/21/asynchronous-loading-and-saving-in-angular-document-editor-with-an-asp-net-core-web-api/llms.txt) - [Preparing Forms for the Document Viewer and Customizing the Signing Process in Angular and ASP.NET Core](https://www.textcontrol.com/blog/2024/03/25/preparing-forms-for-the-document-viewer-and-customizing-the-signing-process-in-angular-and-asp-net-core/llms.txt) - **Handling Form Field Data in Angular Applications** (this article) --- ## Related Posts - [Preparing Forms for the Document Viewer and Customizing the Signing Process in Angular and ASP.NET Core](https://www.textcontrol.com/blog/2024/03/25/preparing-forms-for-the-document-viewer-and-customizing-the-signing-process-in-angular-and-asp-net-core/llms.txt) - [Building an ASP.NET Core Backend (Linux and Windows) for the Document Editor and Viewer](https://www.textcontrol.com/blog/2025/03/26/building-an-asp-net-core-backend-for-the-document-editor-and-viewer/llms.txt) - [Getting Started Video Tutorial: How to use the Document Viewer in Angular](https://www.textcontrol.com/blog/2024/08/05/getting-started-video-tutorial-how-to-use-the-document-viewer-in-angular/llms.txt) - [Asynchronous Loading and Saving in Angular Document Editor with an ASP.NET Core Web API](https://www.textcontrol.com/blog/2024/03/21/asynchronous-loading-and-saving-in-angular-document-editor-with-an-asp-net-core-web-api/llms.txt) - [How to Add Electronic and Digital Signatures to PDFs in ASP.NET Core C# and Angular](https://www.textcontrol.com/blog/2024/03/20/how-to-add-electronic-and-digital-signatures-to-pdfs-in-asp-net-core-c-sharp-and-angular/llms.txt) - [Building an ASP.NET Core Backend Application to Host the Document Editor and Document Viewer](https://www.textcontrol.com/blog/2024/03/14/building-an-asp-net-core-backend-application-to-host-the-document-editor-and-document-viewer/llms.txt) - [Create Fillable PDFs from HTML Forms in C# ASP.NET Core Using a WYSIWYG Template](https://www.textcontrol.com/blog/2026/03/17/create-fillable-pdfs-from-html-forms-in-csharp-aspnet-core-using-a-wysiwyg-template/llms.txt) - [Designing the Perfect PDF Form with TX Text Control in .NET C#](https://www.textcontrol.com/blog/2025/12/16/designing-the-perfect-pdf-form-with-tx-text-control-in-dotnet-csharp/llms.txt) - [Streamline Data Collection with Embedded Forms in C# .NET](https://www.textcontrol.com/blog/2025/08/02/streamline-data-collection-with-embedded-forms-in-csharp-dotnet/llms.txt) - [High-Performance Text Replacement in Large DOCX Files using C# .NET](https://www.textcontrol.com/blog/2025/07/30/high-performance-text-replacement-in-large-docx-files-using-csharp-dotnet/llms.txt) - [Document Viewer 33.2.1 Released: New Event and Bug Fixes](https://www.textcontrol.com/blog/2025/07/30/document-viewer-33-2-1-released-new-event-and-bug-fixes/llms.txt) - [TX Text Control Document Editor and Viewer for Blazor Released](https://www.textcontrol.com/blog/2025/03/25/tx-text-control-document-editor-and-viewer-for-blazor-released/llms.txt) - [Getting Started: Document Viewer for Blazor in ASP.NET Core](https://www.textcontrol.com/blog/2025/03/25/getting-started-document-viewer-for-blazor-in-asp-net-core/llms.txt) - [Getting Started: Document Viewer Version 33.0 with Angular CLI 19.0](https://www.textcontrol.com/blog/2025/03/18/getting-started-document-viewer-version-33-0-with-angular-cli-19-0/llms.txt) - [Getting Started: Document Viewer with ASP.NET Core and Linux WSL Support](https://www.textcontrol.com/blog/2025/03/12/getting-started-document-viewer-with-asp-net-core-and-linux-wsl-support/llms.txt) - [Changing the Language in the Angular Document Editor Using the Resource Kit](https://www.textcontrol.com/blog/2025/03/05/changing-the-language-in-the-angular-document-editor-using-the-resource-kit/llms.txt) - [Convert MS Word DOCX to PDF with Form Fields in C# .NET: Preserve or Flatten Form Fields](https://www.textcontrol.com/blog/2025/02/26/convert-ms-word-docx-to-pdf-with-form-fields-in-csharp-dotnet/llms.txt) - [Announcing Our Work on a Blazor Component for Document Editing and Viewing](https://www.textcontrol.com/blog/2025/01/24/announcing-our-work-on-a-blazor-component-for-document-editing-and-viewing/llms.txt) - [Export and Import Adobe PDF XFDF XML Files in .NET C#](https://www.textcontrol.com/blog/2025/01/22/export-and-import-adobe-pdf-xfdf-xml-files-in-net-c-sharp/llms.txt) - [Impressions from .NET Developer Conference DDC 2024](https://www.textcontrol.com/blog/2024/11/28/impressions-from-net-developer-conference-ddc-2024/llms.txt) - [Back from Florida: Impressions from VSLive! Orlando 2024](https://www.textcontrol.com/blog/2024/11/21/back-from-florida-impressions-from-vslive-orlando-2024/llms.txt) - [Getting Started: Document Viewer with Angular CLI v18.0](https://www.textcontrol.com/blog/2024/11/15/getting-started-document-viewer-with-angular-cli-v18-0/llms.txt) - [Preparing Documents for E-Signing for Multiple Signers in .NET C#](https://www.textcontrol.com/blog/2024/11/13/preparing-documents-for-e-signing-for-multiple-signers-in-net-c-sharp/llms.txt) - [ASP.NET Core: Use the Document Editor and Viewer in the Same Razor View](https://www.textcontrol.com/blog/2024/11/08/asp-net-core-use-the-document-editor-and-viewer-in-the-same-razor-view/llms.txt) - [Creating Advanced Tables in PDF and DOCX Documents with C#](https://www.textcontrol.com/blog/2024/09/30/creating-advanced-tables-in-pdf-and-docx-documents-with-csharp/llms.txt)