fix: fixed checkbox input control

Author: artemtek

dist/ngx-forms.js

@@ -1,10 +1,8 @@
 <div class="row" [formGroup]="group">
-    <label class="col-md-2 font-weight-bold  col-form-label">{{ field.label }}
+    <label class="col-md-2 font-weight-bold col-form-label">{{field.label}}
         <span class="required-icon" [hidden]="!field.required">*</span>
     </label>
     <div class="col-md-10">
-        <div class="row" *ngFor="let item of field.options">
-            <label class="col-md-6"><input type="checkbox" [formControlName]="field.name">{{ item }}</label>
-        </div>
+        <input type="text" class="form-control" [attr.placeholder]="field.placeholder" [formControlName]="field.name">
     </div>
-</div>
+</div>

src/app/components/form-checkbox/form-checkbox.component.html

@@ -1,5 +1,5 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { FormCheckboxComponent as Type } from './form-checkbox.component';
+import { FormCheckboxComponent as Type} from './form-checkbox.component';
 import { ReactiveFormsModule, FormsModule, FormGroup, FormControl } from '@angular/forms';
 import { APP_BASE_HREF } from '@angular/common';
 import { By } from '@angular/platform-browser';
@@ -8,7 +8,7 @@ describe('FormCheckboxComponent', () => {
     let component: Type;
     let fixture: ComponentFixture<Type>;
     let directiveEl;
-    let value = "bbb";
+    let value = true;
 
     beforeEach(async(() => {
         TestBed.configureTestingModule({
@@ -25,15 +25,14 @@ describe('FormCheckboxComponent', () => {
                 fixture = TestBed.createComponent(Type);
                 component = fixture.componentInstance;
 
-                component.field = { type: "checkbox", name: "test", required: true, options: ['aaa', 'bbb', 'ccc'] };
+                component.field = { type: "text", name: "test", required: true };
                 component.group = new FormGroup({
                     test: new FormControl('')
                 });
                 component.group.patchValue({
                     test: value
                 });
 
-
                 fixture.detectChanges();
             });
     }));
@@ -43,8 +42,8 @@ describe('FormCheckboxComponent', () => {
     });
 
     it('ensures component is rendered', () => {
-        directiveEl = fixture.debugElement.queryAll(By.css('input'));
-        expect(directiveEl.length).toEqual(component.field.options.length);
+        directiveEl = fixture.debugElement.query(By.css('input'));
+        expect(directiveEl.nativeElement.value.toString()).toEqual(value.toString());
     });
 
     it('ensures required asterix appears', () => {

src/app/components/form-checkbox/form-checkbox.component.spec.ts

@@ -1,14 +1,13 @@
 import { Component } from '@angular/core';
-import { Field } from '../../models/field.interface';
 import { FormGroup } from '@angular/forms';
+import { Field } from '../../models/field.interface';
 import { IFieldConfig } from '../../models/field-config.interface';
 
 @Component({
     selector: 'form-checkbox',
     template: require('./form-checkbox.component.html')
 })
-
-export class FormCheckboxComponent implements Field {
+export class FormCheckboxComponent implements Field  {
     field: IFieldConfig;
     group: FormGroup;
     model: object;

src/app/components/form-checkbox/form-checkbox.component.ts

@@ -1,13 +1,12 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { FormInputComponent as Type} from './form-input.component';
-import { ReactiveFormsModule, FormsModule, FormBuilder, FormGroup, FormControl } from '@angular/forms';
+import { ReactiveFormsModule, FormsModule, FormGroup, FormControl } from '@angular/forms';
 import { APP_BASE_HREF } from '@angular/common';
 import { By } from '@angular/platform-browser';
 
 describe('FormInputComponent', () => {
     let component: Type;
     let fixture: ComponentFixture<Type>;
-    const formBuilder: FormBuilder = new FormBuilder();
     let directiveEl;
     let value = "Some Test Value";
 
@@ -34,7 +33,6 @@ describe('FormInputComponent', () => {
                     test: value
                 });
 
-
                 fixture.detectChanges();
             });
     }));