Angular reaktivní formuláře Generovat ovládací prvky formuláře z typu

Takže, mám svou třídu Client v TypeScriptu, řekněme, že mám:

export class Client {
   id: string = '';
   name: string = '';
   email: string = '';
}

Teď pokaždé, když chci vytvořit nového klienta, potřebuji formulář, takhle ho vytvářím:

this.currentClient = new FormGroup({
  id: new FormControl(null, Validators.required),
  name: new FormControl(null, Validators.required),
  email: new FormControl(false)
}

Poté přidám formulář do HTML:

    <form [formGroup]="currentClient" (submit)="submit($event)">
        <div class="form-group">
            <input type="text" formControlName="id" class="form-control" placeholder="Id">
        </div>

        <div class="form-group">
            <input type="text" formControlName="name" class="form-control" placeholder="Name">
        </div>

        <div class="form-group">
            <input type="text" formControlName="email" class="form-control" placeholder="Email">
        </div>

        <button  [disabled]="currentContragent.invalid" class="btn btn-primary" type="submit">Submit</button>

    </form>

To je v pořádku, ale mám několik opravdu velkých tříd s více než 30 poli uvnitř. Pro každou musím vytvořit TS třídu, form group a musím ji přidat do HTML. Existuje něco jako:

this.currentClient = formGroupFromType(typeof(Client));

A pak něco, co by mohlo automaticky generovat můj HTML pomocí ng-for nebo něčeho podobného?

Uvažoval jsem o vytvoření vlastní třídy, která by mohla uchovávat název vlastnosti, typ, výchozí hodnotu, zda je povinná a další informace, jako například jaký editor (textové pole, číselné textové pole atd.). Mít seznam vlastností definovaných tímto způsobem by mohl být použit k vygenerování formulářové skupiny a HTML, ale nebude to silně typované, protože nevidím, jak by to mohlo být propojeno s třídou Client.

Máte nějaké nápady nebo návrhy?

Odpověď č. 1

Tak nějak jsem tady napsal pseudokód a doufám, že to pomůže.

Součást

//public form: FormGroup;
//private fb: FormBuilder

form = <FormGroup>this.fb.group({
    forms: this.fb.array(null),
});

addFormByType(formType){
    newForm: FormGroup = new FormGroup();
    // build up the form 
    // possibly by looping through the formType JSON model
    // or call a method to offload form creation by formType 
    (<FormArray>this.form.get('forms')).push(newForm);
}

Šablona (zobrazení) Z dokumentace Angular

  <div formArrayName="forms">
    <div *ngFor="let city of form.controls['forms'].controls; index as i">
      <input formControlName="{{i}}">
    </div>
  </div>

Vyšší úroveň: Vytvořil bych komponentu ControlValueAccessor (CVA) pro každý typ formuláře. Pak bude váš kód snazší na práci a údržbu.