Merge pull request #18 from kingcody/idea/help-block-component

Idea: Use help-block component as message outlet

Author: third774

README.md

@@ -2,7 +2,7 @@
 
 An Angular module that makes Bootstrap form validation easy.
 
-[![Build Status](https://travis-ci.org/third774/ng-bootstrap-form-validation.svg?branch=master)](https://travis-ci.org/third774/ng-bootstrap-form-validation) 
+[![Build Status](https://travis-ci.org/third774/ng-bootstrap-form-validation.svg?branch=master)](https://travis-ci.org/third774/ng-bootstrap-form-validation)
 [![Dependencies](https://david-dm.org/third774/ng-bootstrap-form-validation.svg)](https://david-dm.org/third774/ng-bootstrap-form-validation.svg)
 [![npm downloads](https://img.shields.io/npm/dm/ng-bootstrap-form-validation.svg)](http://npm-stat.com/charts.html?package=ng-bootstrap-form-validation)
 
@@ -30,7 +30,7 @@ import { NgBootstrapFormValidationModule } from 'ng-bootstrap-form-validation';
     BrowserModule,
     FormsModule,
     ReactiveFormsModule,
-    NgBootstrapFormValidationModule.forRoot() 
+    NgBootstrapFormValidationModule.forRoot()
   ],
   providers: [],
   bootstrap: [AppComponent]
@@ -114,6 +114,34 @@ export class BasicExampleComponent implements OnInit {
 </div>
 ```
 
+#### Custom error message placement
+
+`basic-example.component.html`
+```html
+<div class="row">
+  <div class="col-md-6 col-md-offset-3">
+    <form class="form-horizontal" [formGroup]="formGroup" (validSubmit)="onSubmit()">
+      <div class="form-group">
+        <label class="control-label col-sm-2">Email</label>
+        <div class="col-sm-10">
+          <input type="text" class="form-control" formControlName="Email">
+          <bfv-messages></bfv-messages>
+        </div>
+      </div>
+      <div class="form-group">
+        <label class="control-label col-sm-2">Password</label>
+        <div class="col-sm-10">
+          <input type="password" class="form-control" formControlName="Password">
+          <bfv-messages></bfv-messages>
+        </div>
+      </div>
+      <button class="btn btn-default" type="button" (click)="onReset()">Reset</button>
+      <button class="btn btn-primary pull-right" type="submit">Submit</button>
+    </form>
+  </div>
+</div>
+```
+
 ## Custom Error Messages
 
 ### Global Custom Errors
@@ -175,7 +203,7 @@ export class AppModule {
 
 In addition to providing custom errors at the top level using the `.forRoot()` method,
 you can provide custom error messages to a specific control by binding to the
-`customErrorMessages` directive on the `.form-group` element. Modifying the basic 
+`customErrorMessages` directive on the `.form-group` element. Modifying the basic
 example above, we can provide a one time custom error message to a specific `.form-group`. Unlike the global custom error messages, these functions do not need to be individually exported.
 
 `custom-error-example.component.ts`

package-lock.json

@@ -65,6 +65,7 @@
     "karma-jasmine-html-reporter": "^0.2.2",
     "lint-staged": "^4.2.3",
     "ng-packagr": "^2.0.0-rc.8",
+    "ng2-mock-component": "^0.1.0",
     "prettier": "^1.7.4",
     "protractor": "~5.1.2",
     "rimraf": "^2.6.2",

package.json

@@ -1,5 +1,7 @@
 import { async, ComponentFixture, TestBed } from "@angular/core/testing";
 
+import { MockComponent } from "ng2-mock-component";
+
 import { FormGroupComponent } from "./form-group-component";
 import { ErrorMessageService } from "../../Services/error-message.service";
 import { CUSTOM_ERROR_MESSAGES } from "../../Tokens/tokens";
@@ -12,7 +14,13 @@ describe("FormGroupComponent", () => {
   beforeEach(
     async(() => {
       TestBed.configureTestingModule({
-        declarations: [FormGroupComponent],
+        declarations: [
+          FormGroupComponent,
+          MockComponent({
+            selector: "bfv-messages",
+            inputs: ["messages"]
+          })
+        ],
         providers: [
           {
             provide: ErrorMessageService,

src/lib/Components/form-group-component/form-group-component.html

@@ -1,29 +1,33 @@
 import {
   Component,
   ContentChildren,
+  ContentChild,
   ElementRef,
   HostBinding,
   Input,
-  QueryList
+  QueryList,
+  AfterContentInit
 } from "@angular/core";
 import { FormControlName } from "@angular/forms";
 import { ErrorMessage } from "../../Models/ErrorMessage";
 import { ErrorMessageService } from "../../Services/error-message.service";
+import { MessagesComponent } from "../messages/messages.component";
 
 @Component({
+  // tslint:disable:component-selector
   selector: ".form-group",
   template: `
     <ng-content></ng-content>
-    <span class="help-block" *ngFor="let message of messages">{{message}}</span>
+    <bfv-messages *ngIf="!messagesBlock" [messages]="messages"></bfv-messages>
   `
 })
-export class FormGroupComponent {
+export class FormGroupComponent implements AfterContentInit {
   @ContentChildren(FormControlName)
   FormControlNames: QueryList<FormControlName>;
 
   @Input() customErrorMessages: ErrorMessage[] = [];
 
-  @Input() validationDisabled: boolean = false;
+  @Input() validationDisabled = false;
 
   @HostBinding("class.has-error")
   get hasErrors() {
@@ -42,10 +46,22 @@ export class FormGroupComponent {
     );
   }
 
+  @ContentChild(MessagesComponent) public messagesBlock: MessagesComponent;
+
+  public messages: () => string[];
+
   constructor(
     private elRef: ElementRef,
     private errorMessageService: ErrorMessageService
-  ) {}
+  ) {
+    this.messages = () => this.getMessages();
+  }
+
+  ngAfterContentInit() {
+    if (this.messagesBlock) {
+      this.messagesBlock.messages = this.messages;
+    }
+  }
 
   get label() {
     const label = this.elRef.nativeElement.querySelector("label");
@@ -63,13 +79,17 @@ export class FormGroupComponent {
     ];
   }
 
-  get messages(): string[] {
+  private getMessages(): string[] {
     const messages = [];
-    if (!this.isDirtyAndTouched || this.validationDisabled) return messages;
+    if (!this.isDirtyAndTouched || this.validationDisabled) {
+      return messages;
+    }
     this.FormControlNames.filter(c => !c.valid).forEach(control => {
       Object.keys(control.errors).forEach(key => {
-        const error = this.errorMessages.find(error => error.error === key);
-        if (!error) return;
+        const error = this.errorMessages.find(err => err.error === key);
+        if (!error) {
+          return;
+        }
         messages.push(error.format(this.label, control.errors[key]));
       });
     });

src/lib/Components/form-group-component/form-group-component.spec.ts

@@ -0,0 +1,31 @@
+import { async, ComponentFixture, TestBed } from "@angular/core/testing";
+import { By } from "@angular/platform-browser";
+
+import { MessagesComponent } from "./messages.component";
+
+describe("MessagesComponent", () => {
+  const messages = ["message one", "message two"];
+  const getMessages = () => messages;
+  let component: MessagesComponent;
+  let fixture: ComponentFixture<MessagesComponent>;
+
+  beforeEach(
+    async(() => {
+      TestBed.configureTestingModule({
+        declarations: [MessagesComponent]
+      }).compileComponents();
+    })
+  );
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MessagesComponent);
+    component = fixture.componentInstance;
+    component.messages = getMessages;
+    fixture.detectChanges();
+  });
+
+  it("should create a span element for every message", () => {
+    const spans = fixture.debugElement.queryAll(By.css("span"));
+    expect(spans.length).toEqual(messages.length);
+  });
+});

src/lib/Components/form-group-component/form-group-component.ts

@@ -0,0 +1,13 @@
+import { Component, Input } from "@angular/core";
+
+@Component({
+  selector: "bfv-messages",
+  template: `
+    <span class="help-block" *ngFor="let message of messages()">{{message}}</span>
+  `
+})
+export class MessagesComponent {
+  @Input() public messages = () => [];
+
+  constructor() {}
+}

src/lib/Components/messages/messages.component.spec.ts

@@ -2,15 +2,20 @@ import { CommonModule } from "@angular/common";
 import { NgModule, ModuleWithProviders } from "@angular/core";
 import { FormValidationDirective } from "./Directives/form-validation.directive";
 import { FormGroupComponent } from "./Components/form-group-component/form-group-component";
+import { MessagesComponent } from "./Components/messages/messages.component";
 import { ErrorMessageService } from "./Services/error-message.service";
 import { ErrorMessage } from "./Models/ErrorMessage";
 import { CUSTOM_ERROR_MESSAGES } from "./Tokens/tokens";
 
 @NgModule({
-  declarations: [FormValidationDirective, FormGroupComponent],
+  declarations: [
+    FormValidationDirective,
+    FormGroupComponent,
+    MessagesComponent
+  ],
   imports: [CommonModule],
   providers: [ErrorMessageService],
-  exports: [FormValidationDirective, FormGroupComponent]
+  exports: [FormValidationDirective, FormGroupComponent, MessagesComponent]
 })
 export class NgBootstrapFormValidationModule {
   static forRoot(customErrorMessages?: ErrorMessage[]): ModuleWithProviders {

src/lib/Components/messages/messages.component.ts

@@ -9,3 +9,4 @@ export {
 export {
   FormGroupComponent
 } from "./Components/form-group-component/form-group-component";
+export { MessagesComponent } from "./Components/messages/messages.component";