Angular 2: Can we create the Form from FormGroup?

Question

I am developing a dynamic form where the form elements are modified as per user inputs. Is it possible to generate the complete form by just supplying the FormGroup object to the <form></form> tag instead of manually creating each element which is present in the form group.

For Example:

Component.ts

fb: FormBuilder;
formGroupData: FormGroup;

constructor() {
this.formGroupData= this.fb.group({
            selectedItem: ['', Validators.required],
            selectedAmount: ['', Validators.required]
        });
}

HTML:

<form [formGroup]="formGroupData"></form>

This should create the entire form without adding the element selectedAmount and selectedItem elements. Is this possible? If not why what's the harm here?

Answer 1

They did not build forms to work like that. It would make css challenging especially when adding <label> s, input prefixes and suffixes, and other view-side stuff. Ultimately the goal was to separate the view and the model in this way.

You might be able to create a directive like this using the Renderer class if you need to access the view-side stuff.