foe-form-feedback v1.0.0-rc.4

foe-form-feedback

A simple but customizable form-feedback library.

Demo can be found here.

Table of Contents

• Installation
• Usage
• Customization

Installation

Install the foe-form-feedback npm module:

npm install foe-form-feedback --save

Usage

1. Import FormFeedbackModule

Import FormFeedbackModule into the module which shall use form-feedback or into your shared module.

import { NgModule } from '@angular/core';
import { FormFeedbackModule } from 'foe-form-feedback';

@NgModule({
    imports: [
        FormFeedbackModule
    ]
})
export class MyModule { }

2. Use form-feedback

Apply the foeFormFeedback directive to your form.

Example

<input type="text" minlength="12" maxlength="15" required [(ngModel)]="name" foeFormFeedback>

Customization

Providing custom messages

1. Create a service which implements ErrorMessageService.

import { Injectable } from '@angular/core';
import { ValidationErrors } from '@angular/forms';
import { Observable } from 'rxjs';

import { ErrorMessageService } from 'foe-form-feedback';

@Injectable()
export class MyMessageService implements ErrorMessageService {
    get(errors: ValidationErrors): Observable<string[]> {
        ...
    }
}

2. Import FormFeedbackModule by using the withCustomMessageService method

import { NgModule } from '@angular/core';
import { FormFeedbackModule } from 'foe-form-feedback';

import { MyMessageService } from './my-message.service';

@NgModule({
    imports: [
        FormFeedbackModule.withCustomMessageService(MyMessageService)
    ]
})
export class MyModule { }

Use a custom component (Demo)

1. Create a component which implements FormFeedback

import { Component } from '@angular/core';
import { FormFeedback } from 'foe-form-feedback';

@Component({
    templateUrl: 'my-feedback.component.html',
    styleUrls: ['my-feedback.component.scss']
})
export class MyFeedbackComponent implements FormFeedback {
    updateStatus(status: string, errors: ValidationErrors | null) {
        ...
    }
}

2. Import FormFeedbackModule by using the withCustomFeedback method

import { NgModule } from '@angular/core';
import { FormFeedbackModule } from 'foe-form-feedback';

import { MyFeedbackComponent } from './my-feedback.component';

@NgModule({
    imports: [
        FormFeedbackModule.withCustomFeedback(MyFeedbackComponent)
    ]
})
export class MyModule { }