Untitled

import { Component } from '@angular/core';
import { FormGroup } from '@angular/forms';

@Component({
  selector: 'app-root',
  template: `
    <form *ngIf="form" [formGroup]="form" (ngSubmit)="onSubmit()">
      <div dynamicForm [fields]="fields" (formReady)="onFormReady($event)"></div>
      <button type="submit" [disabled]="form.invalid">Submit</button>
    </form>

    <h3>Form Values:</h3>
    <pre>{{ form?.value | json }}</pre>
  `
})
export class AppComponent {
  form!: FormGroup;
  
  fields = [
    { name: 'username', type: 'text', label: 'Username', required: true, minLength: 3, maxLength: 10 },
    { name: 'age', type: 'number', label: 'Age', required: true, min: 18, max: 100 },
    { name: 'dob', type: 'date', label: 'Date of Birth', required: true },
    { name: 'terms', type: 'checkbox', label: 'Accept Terms', required: true },
    { name: 'gender', type: 'select', label: 'Gender', required: true, options: [
        { value: 'male', label: 'Male' },
        { value: 'female', label: 'Female' }
      ]
    }
  ];

  onFormReady(form: FormGroup) {
    this.form = form; // Receive form from directive
  }

  onSubmit() {
    if (this.form.valid) {
      console.log("Form Submitted:", this.form.value);
    } else {
      console.log("Form is invalid!");
    }
  }
}

------
import { Component, Input } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-dynamic-input',
  template: `
    <div>
      <label>{{ field.label }}</label>
      
      <ng-container [ngSwitch]="field.type">
        <input *ngSwitchCase="'text'" type="text" [formControl]="control" class="form-control" />
        <input *ngSwitchCase="'number'" type="number" [formControl]="control" class="form-control" />
        <input *ngSwitchCase="'date'" type="date" [formControl]="control" class="form-control" />
        <input *ngSwitchCase="'checkbox'" type="checkbox" [formControl]="control" />
        <select *ngSwitchCase="'select'" [formControl]="control" class="form-control">
          <option *ngFor="let option of field.options" [value]="option.value">{{ option.label }}</option>
        </select>
      </ng-container>

      <!-- Validation messages -->
      <div *ngIf="control.invalid && control.touched" class="text-danger">
        <small *ngIf="control.errors?.required">* {{ field.label }} is required</small>
        <small *ngIf="control.errors?.minlength">* Minimum length is {{ field.minLength }}</small>
        <small *ngIf="control.errors?.maxlength">* Maximum length is {{ field.maxLength }}</small>
        <small *ngIf="control.errors?.min">* Value should be at least {{ field.min }}</small>
        <small *ngIf="control.errors?.max">* Value should not exceed {{ field.max }}</small>
      </div>
    </div>
  `
})
export class DynamicInputComponent {
  @Input() field: any;
  @Input() control: FormControl;
}

------import { Directive, Input, Output, EventEmitter, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { ViewContainerRef, ComponentFactoryResolver, ComponentRef } from '@angular/core';
import { DynamicInputComponent } from './dynamic-input.component';

@Directive({
  selector: '[dynamicForm]'
})
export class DynamicFormDirective implements OnInit {
  @Input() fields: any[] = [];
  @Output() formReady = new EventEmitter<FormGroup>();

  form: FormGroup = new FormGroup({});

  constructor(private vcr: ViewContainerRef, private resolver: ComponentFactoryResolver) {}

  ngOnInit() {
    this.fields.forEach(field => {
      // Setup dynamic validators
      let validators = [];
      if (field.required) validators.push(Validators.required);
      if (field.minLength) validators.push(Validators.minLength(field.minLength));
      if (field.maxLength) validators.push(Validators.maxLength(field.maxLength));
      if (field.min) validators.push(Validators.min(field.min));
      if (field.max) validators.push(Validators.max(field.max));

      // Create and add FormControl to the FormGroup
      const control = new FormControl(field.value || '', validators);
      this.form.addControl(field.name, control);

      // Create and render DynamicInputComponent
      const factory = this.resolver.resolveComponentFactory(DynamicInputComponent);
      const componentRef: ComponentRef<DynamicInputComponent> = this.vcr.createComponent(factory);

      // Pass field data and form control
      componentRef.instance.field = field;
      componentRef.instance.control = control;
    });

    // Emit form instance to parent component
    this.formReady.emit(this.form);
  }
}