mc-input

Moon and Crater Input

Simple input wrapper to give all inputs a similar look and feel.

Getting Started

Install it.

npm install mc-input

Add it to your module's imports.

import { McInputModule } from 'mc-input';
...

@NgModule({
  ...
  imports: [
    ...
    McInputModule
  ]
})
export class ...

Using It

The primary component <mc-input-wrapper> has one input property, error, which accepts a boolean. When true, the label and input border animate red. If there is an <mc-input-error>, then the error message slides down in red to let the user know.

Ex:

<mc-input-wrapper [error]="email.touched && email.getError('required')">
  <label>Email</label>

  <input type="email" placeholder="Email" formControlName="email" />

  <mc-input-error>Email is required.</mc-input-error>
</mc-input-wrapper>