Untitled

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

@Directive({
  selector: '[dynamicField]'
})
export class DynamicFieldDirective {
  @Input() field: any;
  @Input() form: FormGroup;

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

  ngOnInit() {
    const factory = this.resolver.resolveComponentFactory(DynamicInputComponent);
    const componentRef: ComponentRef<DynamicInputComponent> = this.vcr.createComponent(factory);
    
    componentRef.instance.field = this.field;
    componentRef.instance.form = this.form;
  }
}
--------
import { Component, Input } from '@angular/core';
import { FormGroup } from '@angular/forms';

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

                                                                                                    <div *ngIf="form.controls[field.name].invalid && form.controls[field.name].touched" class="text-danger">
                                                                                                            Invalid {{ field.label }}
                                                                                                                  </div>
                                                                                                                      </div>
                                                                                                                        `
})
export class DynamicInputComponent {
      @Input() field: any;
        @Input() form: FormGroup;
}
}
})
-----------import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-root',
  template: `
    <form [formGroup]="form">
      <div *ngFor="let field of fields">
        <div dynamicField [field]="field" [form]="form"></div>
      </div>
      <button type="submit" [disabled]="form.invalid">Submit</button>
    </form>
  `
})
export class AppComponent {
  form: FormGroup;
  fields = [
    { name: 'username', type: 'text', label: 'Username', validators: [Validators.required] },
    { name: 'age', type: 'number', label: 'Age' },
    { name: 'dob', type: 'date', label: 'Date of Birth' },
    { name: 'terms', type: 'checkbox', label: 'Accept Terms' },
    { name: 'gender', type: 'select', label: 'Gender', options: [
        { value: 'male', label: 'Male' },
        { value: 'female', label: 'Female' }
      ]
    }
  ];

  constructor(private fb: FormBuilder) {
    const controls = this.fields.reduce((acc, field) => {
      acc[field.name] = [null, field.validators || []];
      return acc;
    }, {});

    this.form = this.fb.group(controls);
  }
}