DEV Community

Cover image for How to Design Form Fields in the Angular Word Processor
Arun for Syncfusion, Inc.

Posted on

How to Design Form Fields in the Angular Word Processor

Learn how to design form fields in the Angular Word Processor component. This video explains how to insert the form fields programmatically and import, export, and reset the form data. You will also learn how to apply protection so the forms can only be filled, not changed.

The Angular Word Processor is a feature-rich UI component with editing capabilities like Microsoft Word. Also known as the document editor, it is used to create, edit, view, and print Word documents. It provides all the common word-processing features, including text editing, content formatting, image and table resizing, text find and replace, bookmarks, tables of content, printing, and Word document importing and exporting.

The Word Processor has an intuitive UI for creating fillable forms in documents by inserting legacy form fields, just like in Microsoft Word. Once the document is protected with the FormFieldsOnly restriction, users can fill the form. Insert text, checkbox, and dropdown form fields through a built-in toolbar. Form fields can be inserted using the insertFormField method in the editor module. Protect and unprotect documents using the enforceProtection and stopProtection APIs.

The Word Processor component provides a new native file format called Syncfusion document text (*.sfdt). It helps maintain document importing and exporting purely on the client side. The component comes with a Microsoft Word-inspired navigation pane and provides intuitive UI options to search text, navigate among the results, and replace them with other text.

The Word Processor can export documents into various file formats on the client side, such as Microsoft Word (.docx), text (.txt), and Syncfusion document text (.sfdt). It also supports server-side exporting of Syncfusion document text (.sfdt) files to DOC, DOCX, RTF, TXT, WordML, and HTML formats using the server-side helper Syncfusion.EJ2.DocumentEditor, available in the ASP.NET Core and ASP.NET MVC platforms.

Tutorial video: https://www.syncfusion.com/tutorial-videos

Download an example from GitHub: https://github.com/SyncfusionExamples/how-to-design-form-fields-in-the-angular-word-processor

Top comments (0)