0

I'm part of a team designing a new system. We choose Angular as our frontend Framework and we started to study it for implementation.

Now I hit a roadblock. My idea is to create the inputs on html and fill, hide or label them based on objects from Angular, I want to create single objects for each input, like:

inputPhone = {
    'label': 'Mobile phone',
    'placeholder': '987 333 987',
    'validate': {
        'required': true
    },
    'options': {
        'required': true,
        'hidden': false
    }
};

And another idea is to create objects for each section of this objects, as of:

labels = {
    'inputPhone': 'Mobile phone',
    'inputCity': 'City'
};

placeholders = {
    'inputPhone': '987 333 987',
    'inputCity': 'Las Vegas'
};

required = {
    'inputCity': true
};

So, I'm asking it more to know if there is anything close to a standard that I missed somewhere.

Rafael
  • 1,495
  • 1
  • 14
  • 25
  • 1
    This has shades of reactive forms but what you are really doing is a *data-driven-UI*. While you can do this its **very** hard to get right. Unless you have a strong need for fully dynamically created UI I would stay away from this idea. – BradleyDotNET Aug 13 '18 at 21:58
  • I was praying in silence for an answer, thank you. Well, that's the thing, we can't really **run** from this. It's more or less settled that we will need to do forms that might or might not have required (and that's not even talking about different options of selects, hidden fields, triggered by fields...) fields depending on different inputs... But still, which section are you talking about specifically, the object/input or object/section? Or both? – Rafael Aug 13 '18 at 22:01
  • 1
    I'm confused by @BradleyDotNET's comment. Reactive forms are built with data-driven field configuration in mind. The Angular team even has a documentation page dedicated to [dynamic forms](https://angular.io/guide/dynamic-form). I did this myself for a feedback form whose inputs (question type, question text, and available options when applicable) were dynamically governed by an internal team at my organization. – Mike Hill Aug 13 '18 at 22:07
  • Well, our plan is much like what *reactive forms* propose, but somehow deeper. I tried a few of these json-schema-forms for Angular but they are not fitting every of our purposes. But that's another question... this question I made specifically to try to figure out which approach sounds less of a kill-me-now solution when it comes to maintenance. I have this idea that creating several objects for each input (even though a lot of work) will be much easier to maintain considering they should have the same structure. – Rafael Aug 13 '18 at 22:20
  • 1
    But you know what...? You both might just have solved. The Angular section for dynamic forms have clear examples using a very similar structure to what I'm proposing. I will dig a little deeper. If you guys have anything else that can point me into any direction, please do. – Rafael Aug 13 '18 at 22:24
  • @MikeHill The example in the docs seems, at least to me, somewhat less dynamic than what the OP has in mind. There are obviously various levels of dynamicism; I'm basically just trying to point out that every added point of flexibility/degree of freedom is one more place bugs are going to occur. If you can say "this kind of thing looks *exactly* like this" it makes your life a lot easier. – BradleyDotNET Aug 14 '18 at 04:05
  • If you *are* going to do this @Rafael I strongly suggest doing the first one; the second reeks of parallel arrays. You should also probably use reactive forms to build the "model" and then do whatever UI work as necessary. – BradleyDotNET Aug 14 '18 at 04:06
  • I think the difficulty is being over-stated here. This is a relatively simple case of transforming models to `FormControl`s and then rendering a dynamic form. There are many similar answered questions here on SO ([1](https://stackoverflow.com/a/42619432/1941654), [2](https://stackoverflow.com/a/39693615/1941654), [3](https://stackoverflow.com/q/45245089/1941654), [etc](https://stackoverflow.com/search?q=%5bangular%5d%20dynamic%20form)). I do agree about the technique, though -- separating data into multiple objects (`labels`, `placeholders`, etc) will tend to reduce maintainability. – Mike Hill Aug 14 '18 at 04:30
  • I'm sorry Mike, I beg to differ. There's actually nothing simple about this, giving the fact that the form inputs can be different in different scenarios, options in this inputs can be different. Validations itself. Required fields, fields triggered by others... though Dynamic Forms will be a great help, there is still much to be discussed here. The standard of this object to be used is only (imo) the first step for it. – Rafael Aug 14 '18 at 07:46

0 Answers0