feat(UI组件模块): 添加form模块

src/app/simple/form/form-explain.component.ts

@@ -0,0 +1,11 @@
+import { Component, OnInit, OnDestroy, HostBinding, Optional } from '@angular/core';
+import { FormItemComponent } from './form-item/form-item.component';
+
+@Component({
+  // tslint:disable-next-line:component-selector
+  selector: 'sim-form-explain',
+  template: '<ng-content></ng-content>'
+})
+export class FormExplainComponent  {
+  @HostBinding('class.sim-form-explain') true;
+}

src/app/simple/form/form-item-control.directive.spec.ts

@@ -0,0 +1,8 @@
+import { FormItemControlDirective } from './form-item-control.directive';
+
+describe('FormItemControlDirective', () => {
+  it('should create an instance', () => {
+    const directive = new FormItemControlDirective();
+    expect(directive).toBeTruthy();
+  });
+});

src/app/simple/form/form-item-control.directive.ts

@@ -0,0 +1,71 @@
+import { Directive, HostBinding, ContentChild, Input } from '@angular/core';
+import { NgControl } from '@angular/forms';
+
+@Directive({
+  // tslint:disable-next-line:directive-selector
+  selector: '[simFormItemControl],[sim-form-item-control]'
+})
+export class FormItemControlDirective {
+  @HostBinding('class.sim-form-item-control') true;
+  private _hasFeedback = false;
+  private _validateStatus: string | NgControl;
+  @ContentChild(NgControl) ngControl: NgControl;
+
+  @Input()
+  set validateStatus(value: string | NgControl) {
+    this._validateStatus = value;
+  }
+
+  get validateStatus(): string | NgControl {
+    return this._validateStatus || this.ngControl;
+  }
+
+  @Input()
+  set hasFeedback(value: boolean) {
+    this._hasFeedback = Boolean(value);
+  }
+
+  get hasFeedback(): boolean {
+    return this._hasFeedback;
+  }
+
+  @HostBinding('class.has-feedback')
+  get isHasFeedBack(): boolean {
+    return this.hasFeedback;
+  }
+
+  @HostBinding('class.has-warning')
+  get isWarning(): boolean {
+    return this.validateStatus === 'warning' ||
+      this.validateStatus &&
+      (this.validateStatus as NgControl).dirty &&
+      (this.validateStatus as NgControl).hasError &&
+      (this.validateStatus as NgControl).hasError('warning');
+  }
+  @HostBinding('class.is-validating')
+  get isValidate(): boolean {
+    return this.validateStatus === 'validating' ||
+      this.validateStatus === 'pending' ||
+      this.validateStatus &&
+      (this.validateStatus as NgControl).dirty &&
+      (this.validateStatus as NgControl).pending;
+  }
+  @HostBinding('class.has-error')
+  get isError(): boolean {
+    return this.validateStatus === 'error' ||
+      this.validateStatus &&
+      (this.validateStatus as NgControl).dirty &&
+      (this.validateStatus as NgControl).errors &&
+      (this.validateStatus as NgControl).hasError &&
+     !(this.validateStatus as NgControl).hasError('warning');
+  }
+  @HostBinding('class.has-success')
+  get isSuccess(): boolean {
+    return this.validateStatus === 'success' ||
+      this.validateStatus &&
+      (this.validateStatus as NgControl).dirty &&
+      (this.validateStatus as NgControl).valid;
+  }
+  constructor() { }
+
+}

src/app/simple/form/form-item-required.directive.spec.ts

@@ -0,0 +1,8 @@
+import { FormItemRequiredDirective } from './form-item-required.directive';
+
+describe('FormItemRequiredDirective', () => {
+  it('should create an instance', () => {
+    const directive = new FormItemRequiredDirective();
+    expect(directive).toBeTruthy();
+  });
+});

src/app/simple/form/form-item-required.directive.ts

@@ -0,0 +1,11 @@
+import { Directive, HostBinding } from '@angular/core';
+
+@Directive({
+  // tslint:disable-next-line:directive-selector
+  selector: '[simFormItemRequired],[sim-form-item-required]'
+})
+export class FormItemRequiredDirective {
+  @HostBinding('class.sim-form-item-required') true;
+  constructor() { }
+
+}

src/app/simple/form/form-item.directive.spec.ts

@@ -0,0 +1,8 @@
+import { FormItemDirective } from './form-item.directive';
+
+describe('FormItemDirective', () => {
+  it('should create an instance', () => {
+    const directive = new FormItemDirective();
+    expect(directive).toBeTruthy();
+  });
+});

src/app/simple/form/form-item.directive.ts

@@ -0,0 +1,11 @@
+import { Directive, HostBinding } from '@angular/core';
+
+@Directive({
+  // tslint:disable-next-line:directive-selector
+  selector: '[simFormItem],[sim-form-item]'
+})
+export class FormItemDirective {
+  @HostBinding('class.sim-form-item') true;
+  constructor() { }
+
+}

src/app/simple/form/form-item/form-item.component.html

@@ -0,0 +1,7 @@
+<div class="sim-form-item-label" [fxFlex]="labelFlex" *ngIf="label">
+  <ng-container [ngTemplateOutlet]="label"></ng-container>
+</div>
+<div class="sim-form-item-control-wrapper" fxFlex="auto" *ngIf="control">
+  <ng-container [ngTemplateOutlet]="control"></ng-container>
+</div>
+<ng-content></ng-content>

src/app/simple/form/form-item/form-item.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FormItemComponent } from './form-item.component';
+
+describe('FormItemComponent', () => {
+  let component: FormItemComponent;
+  let fixture: ComponentFixture<FormItemComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ FormItemComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FormItemComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/simple/form/form-item/form-item.component.ts

@@ -0,0 +1,20 @@
+import { Component, OnInit, HostBinding, ViewEncapsulation, ContentChild, TemplateRef, Input } from '@angular/core';
+
+@Component({
+  // tslint:disable-next-line:component-selector
+  selector: 'sim-form-item',
+  templateUrl: './form-item.component.html',
+  encapsulation: ViewEncapsulation.None,
+})
+export class FormItemComponent implements OnInit {
+  @HostBinding('class.sim-form-item') true;
+  @Input() labelFlex: string = '20';
+  @ContentChild('label') label: TemplateRef<any>;
+  @ContentChild('control') control: TemplateRef<any>;
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}