pascaliske / form-elements

Collection of form elements for Angular projects.

@pascaliske/form-elements

Installation

To install the module use the following command:

$ yarn add @pascaliske/form-elements

Usage

Import the module in your Angular app:

import { NgModule } from '@angular/core'
import { CommonModule } from '@angular/common'
import { BrowserModule } from '@angular/platform-browser'
import { FormElementsModule } from '@pascaliske/form-elements'
import { AppComponent } from './app.component'

@NgModule({
    bootstrap: [AppComponent],
    declarations: [AppComponent],
    imports: [CommonModule, BrowserModule, FormElementsModule],
})
export class AppModule {}

Then import the styles in your global scss styles:

@import '~@pascaliske/form-elements/styles';

Note: If you want to use the cmp-f-select, cmp-f-date od cmp-f-time components you also need to add their 3rd-party library styles:

@import '~choices.js/public/assets/styles/choices.min.css'; // cmp-f-select
@import '~flatpickr/dist/flatpickr.min.css'; // cmp-f-date, cmp-f-time

Now you can use the components in your template:

<cmp-f-form>
    <cmp-f-row>
        <cmp-f-column>
            <cmp-f-input [label]="'My text input'"></cmp-f-input>
        </cmp-f-column>
    </cmp-f-row>
</cmp-f-form>

License

MIT © Pascal Iske