Reusable form control inputs in Angular5

Question

I've been looking through tutorials and I can't seem to find a good solution anywhere.

In all of the tutorials with forms, they rewrite so much. A simple input with validation and an error message can be several lines long with several tags as well.

Wouldn't it be smarter to create something like app-input, that you pass a name and label and it generates the rest?

Here's how I made my username field,

<div class="form-group">
    <label for="username">Username</label>
    <label for="username"
           aria-haspopup="true"
           role="tooltip"
           class="tooltip tooltip-validation tooltip-sm"
           [class.invalid]="loginForm.get('username').invalid
        && (loginForm.get('username').dirty || loginForm.get('username').touched)">
        <input id="username" type="text"
               formControlName="username">
        <span class="tooltip-content">Username is required.</span>
    </label>
</div>

Wouldn't something like

<app-input name="username" label="username"></app-input>

be a lot simpler? Or is there a downside to this that I'm not thinking of?

of course it would be a lot simpler. that's why shops like ours are still making money by simplifying overly complicated frameworks no-one understands :) only downside is you may lose flexibility, but if the generators are under your control you can easily compensate for that. this question is likely to get opinionated answers, consider rephrasing into a clear problem statement, like "how do I ... expand a user defined tag to a templated piece of angular-enabled html ... etc." — Cee McSharpface
– Cee McSharpface, Commented Jan 26, 2018 at 18:11
What you're describing is effectively the approach that Angular Material took to input elements. What you may not be taking into account are all the possible attributes that <input> and related elements can have. They utilized attribute directives (matInput) on the <input> to avoid having to create an @Input() for each and every possible HTML attribute that could be put onto <input> elements. Attribute directives are very powerful. — Alexander Staroselsky
– Alexander Staroselsky, Commented Jan 26, 2018 at 18:11
Have you seen the docs on building dynamic forms? angular.io/guide/dynamic-form — DeborahK
– DeborahK, Commented Jan 26, 2018 at 22:00

David Anthony Acosta · Accepted Answer · 2018-01-26 18:12:09Z

well there's a lot more you would need to do. it's not as simple as encapsulating like that. If you have a form within a component like that, you'd have to implement the code that will allow other components to access its values. Otherwise your host form will not know if the value is valid or not. in other words, lets say i have a component named "MyComponent".

export class MyComponent {}

and in the html, i have .

<form>
  <app-input></app-input>
</form>

Well, that works fine. But lets say I only want users to submit the form if the input is valid..Well, at this point, only the AppInput component knows if that input is valid. MyComponent has no way of knowing if the requirements for that input have been met. So you have to implement more code to be able to communicate between the two. If you are just trying to show the input and if it has errors or not, then yes, your method is easier. But if you want to customize it further, than it actually requires more work than your first example. In conclusion, I am not saying that putting inputs into their own components is a bad idea, it's not. What I am saying is that it's actually not easier. In most cases, it will require more work. And there are other things to take into account. How do i disable the input? How do I add a dynamic pre-set value, etc...

I agree if you try to implement everything than it would be a lot more work. When I was using react/redux we would make the controller that took the commonly used attributes/directives, but you could also pass anything you wanted and it would get added by doing something like {...custom}. So you wouldn't have to do anything extra for disabled unless you want to disable, then pass that as well

Collectives™ on Stack Overflow

Reusable form control inputs in Angular5

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related