Dynamic forms are possible in Angular 6 (I would assume also in Angular 1,
but I've never used that).
You need to use FormGroup, FormArray, and FormControl to build the
structure that Angular will store the user's input in and then use
*ngSwitch/ngIf and ngFor to generate the display from the list of controls.
Basically: you need a structure that describes the layout of the form so
that the template can iterate over it and emit the correct input types and
labels. Ex:
<form>
<div *ngFor="let input of inputs">
<ng-container *ngSwitch="input.type">
<label [for]="input.ctlId">{{input.label}}</label>
<input *ngSwitchCase="'text'" [id]="input.ctlId" type="text"
[formControl]="form.get(input.ctlId)" />
<input *ngSwitchCase="'password'" [id]="input.ctlId"
type="password" [formControl]="form.get(input.ctlId)" />
<!-- other inputs -->
...
</form>
In your component, the "form" member would be a FormGroup populated with a
control for each input allowing you to specify validators. The "inputs"
member would be an array describing everything you want the superadmin to
have control over and this would be fetched through APIs or whatever method
you're using to get data from the database.
On Fri, Sep 7, 2018 at 4:12 PM Nikhil Patki <[email protected]> wrote:
> Hi Folks,
>
> I have a business requirement that needs creating a Business Admin console
> to allow power users to change layout of 5 input forms. These forms capture
> various information through standard controls like Text field, Dropdown
> list , Checkbox etc. Business does not want the layout of fields on form to
> be hardcoded. Instead , they want an ability to store coordinates/relative
> field position stored in DB so that system can render the field on screen
> based on DB value. For example, First Name field is currently on top right
> section of form. Power user should be able to change its position to left
> bottom through admin console and next time the form loads - FirstName field
> location should be left bottom.
>
> Has anyone implemented this behavior?
>
> Any pointers would be highly appreciated.
>
>
> --
> You received this message because you are subscribed to the Google Groups
> "Angular and AngularJS discussion" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to [email protected].
> To post to this group, send email to [email protected].
> Visit this group at https://groups.google.com/group/angular.
> For more options, visit https://groups.google.com/d/optout.
>
--
Lucas Lacroix
Computer Scientist
Advanced Technology Division, MEDITECH <http://ehr.meditech.com/>
781-774-2293
--
<https://ehr.meditech.com/expanse>
<https://www.linkedin.com/company/meditech>
<https://twitter.com/MEDITECH> <https://www.facebook.com/MeditechEHR>
Subscribe
<https://info.meditech.com/get-great-meditech-content?hsCtaTracking=864299ec-5abf-4004-9c6d-2d051794101f%7Cc911be42-538a-4a48-8dca-a6d4001c6326>
to receive emails from MEDITECH or to change email preferences.
--
You received this message because you are subscribed to the Google Groups
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
