Adding service for required and invalid sections

src/app/components/sectioned-form/demo-information-form.component.html

@@ -9,8 +9,7 @@
     </label>
     <input 
       class="sky-form-control"
-      [ngModel]="name"
-      (ngModelChange)="nameChange($event)"
+      [(ngModel)]="name"
       id="inputName" 
       type="text"
       [required]="nameRequired"
@@ -25,10 +24,9 @@
     </label>
     <input 
       class="sky-form-control"
-      [ngModel]="id"
+      [(ngModel)]="id"
       id="inputId" 
       type="text"
-      (ngModelChange)="idChange($event)"
     />
   </div>
 </div>

src/app/components/sectioned-form/demo-information-form.component.ts

@@ -1,53 +1,52 @@
-import { Component, Output, EventEmitter } from '@angular/core';
+import { Component } from '@angular/core';
+import { SkySectionedFormService } from 'src/core';
 
 @Component({
   selector: 'sky-demo-information-form',
   templateUrl: './demo-information-form.component.html'
 })
 export class SkyDemoInformationFormComponent {
-  public name: string = '';
-  public id: string = '5324901';
 
-  @Output()
-  public requiredChange = new EventEmitter<boolean>();
-
-  @Output()
-  public invalidChange = new EventEmitter<boolean>();
-
-  private _nameRequired: boolean = false;
+  private _nameRequired: boolean;
 
   public get nameRequired() {
     return this._nameRequired;
   }
 
   public set nameRequired(value: boolean) {
     this._nameRequired = value;
-    this.emitRequiredChange();
+    this.sectionedFormService.requiredFieldChanged(value);
   }
 
-  public nameChange(newName: string) {
-    this.name = newName;
-    this.emitRequiredChange();
+  private _name: string = '';
+
+  public get name() {
+    return this._name;
   }
 
-  public idChange(newId: string) {
-    this.id = newId;
+  public set name(value: string) {
+    this._name = value;
 
-    if (this.idValid(this.id)) {
-      this.invalidChange.emit(false);
-    } else {
-      this.invalidChange.emit(true);
+    if (this._nameRequired) {
+      this.sectionedFormService.requiredFieldChanged(!this._name);
     }
   }
 
-  private emitRequiredChange() {
-    if (this.nameRequired && !this.name) {
-      this.requiredChange.emit(true);
-    } else {
-      this.requiredChange.emit(false);
-    }
+  private _id: string = '5324901';
+
+  public get id() {
+    return this._id;
   }
 
+  public set id(value: string) {
+    this._id = value;
+
+    const valid = this.idValid(this._id);
+    this.sectionedFormService.invalidFieldChanged(!valid);
+  }
+
+  constructor(private sectionedFormService: SkySectionedFormService) {}
+
   private idValid(value: string) {
     if (value) {
       let regExp = new RegExp('^[0-9]+$');

src/app/components/sectioned-form/sectioned-modal-form-demo.component.html

@@ -5,10 +5,7 @@
   <sky-modal-content>
     <sky-sectioned-form (indexChanged)="updateIndex($event)">
       <sky-sectioned-form-section heading="Basic information">
-        <sky-demo-information-form 
-          (requiredChange)="requiredChange($event)"
-          (invalidChange)="invalidChange($event)"
-        >
+        <sky-demo-information-form>
         </sky-demo-information-form>
       </sky-sectioned-form-section>
       <sky-sectioned-form-section heading="Addresses" itemCount="2" [active]="activeTab">

src/app/components/sectioned-form/sectioned-modal-form-demo.component.ts

@@ -33,14 +33,6 @@ export class SkySectionedModalFormDemoComponent implements AfterContentChecked {
     this._activeIndex = newIndex;
   }
 
-  public requiredChange(required: boolean) {
-    this.sectionedFormComponent.setRequired(required);
-  }
-
-  public invalidChange(invalid: boolean) {
-    this.sectionedFormComponent.setInvalid(invalid);
-  }
-
   public tabsHidden() {
     return !this.sectionedFormComponent.tabsVisible();
   }

src/core.ts

@@ -414,7 +414,8 @@ export {
 export {
   SkySectionedFormComponent,
   SkySectionedFormModule,
-  SkySectionedFormSectionComponent
+  SkySectionedFormSectionComponent,
+  SkySectionedFormService
 } from './modules/sectioned-form';
 export {
   SkySortComponent,

src/modules/sectioned-form/fixtures/sectioned-form-fixture-information-1.component.html

@@ -1 +1,13 @@
-<div>information 1</div>
+<div class="demo-content">information 1</div>
+
+<sky-checkbox id="requiredTestCheckbox" [(ngModel)]="required">
+  <sky-checkbox-label>
+    Mark required
+  </sky-checkbox-label>
+</sky-checkbox>
+
+<sky-checkbox id="invalidTestCheckbox" [(ngModel)]="invalid">
+  <sky-checkbox-label>
+    Mark invalid
+  </sky-checkbox-label>
+</sky-checkbox>

src/modules/sectioned-form/fixtures/sectioned-form-fixture-information-1.component.ts

@@ -1,7 +1,33 @@
 import { Component } from '@angular/core';
+import { SkySectionedFormService } from './../sectioned-form.service';
 
 @Component({
   selector: 'sky-sectioned-form-fixture-information-1',
   templateUrl: './sectioned-form-fixture-information-1.component.html'
 })
-export class SkySectionedFormFixtureInformation1Component {}
+export class SkySectionedFormFixtureInformation1Component {
+
+  private _required: boolean;
+
+  public get required() {
+    return this._required;
+  }
+
+  public set required(value: boolean) {
+    this._required = value;
+    this.sectionedFormService.requiredFieldChanged(value);
+  }
+
+  private _invalid: boolean;
+
+  public get invalid() {
+    return this._invalid;
+  }
+
+  public set invalid(value: boolean) {
+    this._invalid = value;
+    this.sectionedFormService.invalidFieldChanged(value);
+  }
+
+  constructor(private sectionedFormService: SkySectionedFormService) {}
+}

src/modules/sectioned-form/fixtures/sectioned-form-fixtures.module.ts

@@ -1,5 +1,6 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
 
 import { SkySectionedFormModule } from '../';
 import { SkySectionedFormFixtureComponent } from './sectioned-form.component.fixture';
@@ -20,6 +21,8 @@ import {
   SkySectionedFormFixtureInformation2Component
 } from './sectioned-form-fixture-information-2.component';
 
+import { SkyCheckboxModule } from './../../checkbox/checkbox.module';
+
 @NgModule({
   declarations: [
     SkySectionedFormFixtureComponent,
@@ -30,7 +33,9 @@ import {
   ],
   imports: [
     CommonModule,
-    SkySectionedFormModule
+    SkySectionedFormModule,
+    SkyCheckboxModule,
+    FormsModule
   ],
   exports: [
     SkySectionedFormFixtureComponent,

src/modules/sectioned-form/index.ts

@@ -1,3 +1,4 @@
 export { SkySectionedFormComponent } from './sectioned-form.component';
 export { SkySectionedFormModule } from './sectioned-form.module';
 export { SkySectionedFormSectionComponent } from './sectioned-form-section.component';
+export { SkySectionedFormService } from './sectioned-form.service';

src/modules/sectioned-form/sectioned-form-section.component.ts

@@ -1,17 +1,24 @@
 import {
   Component,
   Input,
-  ViewChild
+  ViewChild,
+  OnInit,
+  OnDestroy
 } from '@angular/core';
 
+import { Subject } from 'rxjs/Subject';
+import 'rxjs/add/operator/takeUntil';
+
 import { SkyVerticalTabComponent } from './../vertical-tabset/vertical-tab.component';
+import { SkySectionedFormService } from './sectioned-form.service';
 
 @Component({
   selector: 'sky-sectioned-form-section',
   templateUrl: './sectioned-form-section.component.html',
+  providers: [SkySectionedFormService],
   styleUrls: ['./sectioned-form-section.component.scss']
 })
-export class SkySectionedFormSectionComponent {
+export class SkySectionedFormSectionComponent implements OnInit, OnDestroy {
 
   @Input()
   public heading: string;
@@ -27,4 +34,23 @@ export class SkySectionedFormSectionComponent {
 
   @ViewChild(SkyVerticalTabComponent)
   public tab: SkyVerticalTabComponent;
+
+  private _ngUnsubscribe = new Subject();
+
+  constructor(private sectionedFormService: SkySectionedFormService) {}
+
+  public ngOnInit() {
+    this.sectionedFormService.requiredChange
+    .takeUntil(this._ngUnsubscribe)
+    .subscribe((required: boolean) => this.fieldRequired = required);
+
+  this.sectionedFormService.invalidChange
+    .takeUntil(this._ngUnsubscribe)
+    .subscribe((invalid: boolean) => this.fieldInvalid = invalid);
+  }
+
+  public ngOnDestroy() {
+    this._ngUnsubscribe.next();
+    this._ngUnsubscribe.complete();
+  }
 }