Angular Reactive Forms Generate Form Controls from Type

Question

So, I have my Client class in TypeScript, let's say I have:

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

Now every time I want to create a new Client I need a form, that's how I build it:

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

Then I add the form to the 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>

That's fine but I have some really big classes with more than 30 fields inside. For each, I have to create a TS class, a form group and I have to add it to the html. Is there anything like:

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

And then something that could automatically generate my html using ng-for or something?

I was thinking of building my own class that could hold property name, type, default value, isRequired and some other information like what editor (textbox, numeric textbox, etc). Having a list of properties defined like this could be used to generate the form group and the html, but it won't be strongly typed as I don't see how it could be connected to the Client class.

Any ideas or suggestions?

I don't think I can write code but you'd approach this using FormArray and nest new Client-based FormGroups within them. You could use JSON to output the form controls if you feel the need to "model" each form type. Am I on the right path? — Ben Racicot
– Ben Racicot, Commented Jun 12, 2019 at 18:05
ask to google for "angular dynamic forms" is a good sugestion? — Eliseo
– Eliseo, Commented Jun 12, 2019 at 22:29

Ben Racicot · Accepted Answer · 2019-06-12 18:19:52Z

1

I kind of wrote pseudo code here and I hope it helps.

Component

//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);
}

Template (view) From Angular docs

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

Higher level: I would create a ControlValueAccessor (CVA) component for each form type. Then your code will be easier to work with and maintain.

answered Jun 12, 2019 at 18:19

Ben Racicot

6,05816 gold badges82 silver badges140 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Kaloyan Manev Over a year ago

That's cool but I don't understand how could I could build the form.

Ben Racicot Over a year ago

Your form has to be dynamic as the user adds new group types right? Each group type should be a FormGroup added to the main FormArray.

Kaloyan Manev Over a year ago

It doesn't need to be dynamic, I just want it to hold the same fields as the class without me having to define them (my 2nd code block in the question).

Collectives™ on Stack Overflow

Angular Reactive Forms Generate Form Controls from Type

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related