自定义输入模块在Angular中是一种好习惯吗？

Question

App I'm building, all inputs look exactly the same (Design wise).

I am feeling I am repeating my self every time with the following lines:

HTML

<div class="myInputContainer">
  <input
    type="text"
    class="myInputView-input"
    aria-label="login_email"
    placeholder="Filter Menu Items..."/>
</div>

CSS

.myInputContainer {
  @extend %input-like-container;
}

.myInputView-input {
  @extend %input-like;
  width: 100%;
}

I am considering creating an Input module and using it instead of repeating code

<my-input placeholder="foo">

My question is:

Is this good practice to create a module of a base UI component? (Using module is the only way all other modules can import and use it)

All examples applications I see use only default <input> and I am not really sure why.

Thanks.

Answer 1

Speaking about angular - yes. Angular is a component-based framework. So here how we do in our project. We have a base module for common components.

myapp.common

I have a bunch of custom components in it.

myapp.common.input

myapp.common.select

Check out what AngularJS team suggest:

While the example above is simple, it will not scale to large applications. Instead we recommend that you break your application to multiple modules like this:

1. A module for each feature
2. A module for each reusable component (especially directives and filters)
3. And an application level module which depends on the above modules and contains any initialization code.

Here is how my input component looks like:

(function () {
  /* @ngInject */
  function InputComponent() {
    const ctrl = this;

    ctrl.$onInit = function () {
      ctrl.ngModel.$render = function () {
        ctrl.innerModel = ctrl.ngModel.$viewValue;
      };
      ctrl.onChange = function () {
        ctrl.ngModel.$setViewValue(ctrl.innerModel);
      };
    };
  }

  angular
    .module('myapp.common.input')
    .component('myappInput', {
      controller: InputComponent,
      require: {
        ngModel: 'ngModel',
      },
      bindings: {
        placeholder: '@',
        type: '@',
        title: '@',
      },
      template:
        `<div class="form-group">
          <label class="myapp-input-title">
            {{ ::$ctrl.title }}
          </label>
          <input
            ng-model="$ctrl.innerModel"
            ng-change="$ctrl.onChange()"
            placeholder="{{ ::$ctrl.placeholder }}"
            type="{{ ::$ctrl.type }}"
         </div>`,
    });
}());

The little snippet in $onInit is required to bind custom component ngModel to input model.

So now I simply use this

<myapp-input ng-model='modelName'></myapp-input>

Here are some benefits:

1. All your components looks the same, you are not afraid to forget class or something
2. Easy to extend - you already have a component and all its code concentrated in one place.
3. Easy to write unit tests - you just including myapp.custom.input to the test suite and make sure that you testing this exact peace of code
4. Easy to change design - you just have to change it one place and the changes will be automatically applied to the whole project.