form builder in angularjs

In AngularJS (1.x), a form builder typically converts a JSON configuration object into a fully interactive DOM form with data-binding (ng-model) and validation. You can build a form builder in AngularJS using either a custom JSON-schema renderer or an existing library. Approach 1: Schema-Driven Dynamic Form Renderer (Custom) The most common approach is defining field metadata in your controller scope and iterating over it using ng-repeat and ng-switch.

1. Define the Schema in Controller JavaScript angular.module('formApp', []) .controller('FormController', function($scope) { // Stores user input $scope.formData = {};

   // Dynamic field definitions $scope.formSchema = [ { type: 'text', name: 'username', label: 'Username', required: true, placeholder: 'Enter username' }, { type: 'select', name: 'role', label: 'User Role', required: true, options: ['Admin', 'Editor', 'Viewer'] }, { type: 'checkbox', name: 'subscribe', label: 'Subscribe to newsletter', required: false } ];

   $scope.submitForm = function() { if ($scope.dynamicForm.$valid) { console.log('Submitted Payload:', $scope.formData); } }; });

2. Render HTML Dynamically To maintain AngularJS form validation, dynamic name attributes must be referenced using bracket notation (dynamicForm[field.name]). HTML

<form name="dynamicForm" ng-submit="submitForm()" novalidate> <div ng-repeat="field in formSchema" class="form-group"> <label>{{ field.label }} <span ng-if="field.required">*</span></label>

<div ng-switch="field.type">
  <!-- Text / Email / Password Input -->
  <input ng-switch-when="text"
         type="text"
         name="{{ field.name }}"
         ng-model="formData[field.name]"
         ng-required="field.required"
         placeholder="{{ field.placeholder }}"
         class="form-control" />

  <!-- Select Dropdown -->
  <select ng-switch-when="select"
          name="{{ field.name }}"
          ng-model="formData[field.name]"
          ng-options="opt for opt in field.options"
          ng-required="field.required"
          class="form-control">
    <option value="">-- Select Option --</option>
  </select>

  <!-- Checkbox Input -->
  <input ng-switch-when="checkbox"
         type="checkbox"
         name="{{ field.name }}"
         ng-model="formData[field.name]" />
</div>

<!-- Validation Error Messaging -->
<div ng-show="dynamicForm[field.name].$touched && dynamicForm[field.name].$invalid" class="error">
  <span ng-show="dynamicForm[field.name].$error.required">This field is required.</span>
</div>

</div>

<button type="submit" ng-disabled="dynamicForm.$invalid">Submit</button>

</form>

Approach 2: Popular AngularJS Form Builder Libraries If you need drag-and-drop or complex conditional logic out of the box, existing ecosystem modules are commonly used: angular-schema-form: Generates complex Bootstrap or Angular Material forms directly from JSON Schema definitions. Handles validation and custom directives out of the box. Form.io (AngularJS SDK): A platform and client library providing a full visual drag-and-drop form builder interface with REST API submission support. angular-form-builder: An older drag-and-drop component builder suited for simple custom layout builders. Key Caveats for AngularJS Dynamic Forms Scope Isolation in ng-repeat: ng-repeat creates a child scope for each iteration. Always bind ng-model to an object property (e.g., formData[field.name]) rather than a primitive scope variable to prevent child scope shadowing. Dynamic Validation Names: Accessing field controllers on the parent form requires string evaluation on the form scope instance, e.g., dynamicForm[field.name].$error.required. Dynamic Directives ($compile): If your field types require custom directives appended at runtime, use $compile inside a custom directive wrapper rather than raw string templating. Would you like to expand this into a drag-and-drop form editor interface, or focus on adding custom validation rules to the schema?