feat(NumberField): add InputNumberComponent (#45)

* feat(NumberField): add InputNumberComponent * fix(Test): fix unit test * chore(InputNumber): getting numeric symbols from Angular locale * chore(merge): merge master
ESSS · Dec 3, 2018 · e8c3af9 · e8c3af9
1 parent 6c01689
commit e8c3af9
Show file tree

Hide file tree

Showing 20 changed files with 1,759 additions and 1,411 deletions.
diff --git a/demo/src/app/app.module.ts b/demo/src/app/app.module.ts
@@ -1,6 +1,6 @@
 import { BsLocaleService, BsDatepickerModule } from 'ngx-bootstrap/datepicker';
 
-import { NgModule } from '@angular/core';
+import { NgModule, LOCALE_ID } from '@angular/core';
 import { HttpModule } from '@angular/http';
 import { FormsModule } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
@@ -11,10 +11,17 @@ import { AppSharedModule } from './shared/shared.module';
 import { HomeModule } from './home/home.module';
 import { AppComponent } from './app.component';
 
+import localePt from '@angular/common/locales/pt';
+import { registerLocaleData } from '@angular/common';
 import { defineLocale } from 'ngx-bootstrap/chronos';
-import { ptBrLocale, enGbLocale } from 'ngx-bootstrap/locale';
-defineLocale(ptBrLocale.abbr, ptBrLocale);
-defineLocale('en-us', enGbLocale);
+import { ptBrLocale, glLocale } from 'ngx-bootstrap/locale';
+
+// register angular locale
+registerLocaleData(localePt, 'pt');
+
+// register ngx-bootstrap locales
+defineLocale('pt', ptBrLocale);
+
 
 @NgModule({
   declarations: [AppComponent],
@@ -31,12 +38,14 @@ defineLocale('en-us', enGbLocale);
     AppSharedModule,
     HomeModule
   ],
-  providers: [],
+  providers: [
+    { provide: LOCALE_ID, useValue: 'en'}
+  ],
   bootstrap: [AppComponent]
 })
 export class AppModule {
   constructor(bsLocaleService: BsLocaleService) {
     // aplly locale
-    bsLocaleService.use(ptBrLocale.abbr);
+    bsLocaleService.use('en');
   }
 }
diff --git a/demo/src/app/home/home.component.html b/demo/src/app/home/home.component.html
@@ -33,14 +33,15 @@ <h1>ng-xform</h1>
           <input type="number" class="form-control" [(ngModel)]="labelWidth" [ngModelOptions]="{standalone: true}"/>
         </div>
         <div class="col-sm-3 form-group">
-          <button *ngIf="xformComponent.editing" type="button" class="btn btn-info" (click)="populate()">Populate</button>
+          <button *ngIf="editing" type="button" class="btn btn-info" (click)="populate()">Populate</button>
         </div>
       </fieldset>
     </form>
     <hr />
     <div class="panel-body">
       <ng-xform-edit-save
         [fields]="fields"
+        [(editing)]="editing"
         [horizontalForm]="horizontal"
         [labelWidth]="labelWidth"
         (submit)="onSubmit($event)">

diff --git a/demo/src/app/home/home.component.ts b/demo/src/app/home/home.component.ts
@@ -14,7 +14,8 @@ import {
   RadioGroupField,
   SelectField,
   TextField,
-  CustomField
+  CustomField,
+  NumberField
 } from '@esss/ng-xform';
 import { Observable, of, Subject, Subscription } from 'rxjs';
 import { delay, map } from 'rxjs/operators';
@@ -44,6 +45,7 @@ export class HomeComponent implements OnInit, OnDestroy {
 
   public fields: DynamicField[];
   public horizontal = false;
+  public editing = true;
   public labelWidth = 2;
   public model: any;
   public outputhelper = {'A': 1, 'B': 2, 'C': 3};
@@ -63,6 +65,10 @@ export class HomeComponent implements OnInit, OnDestroy {
     maxDate.setDate(maxDate.getDate() + 3);
     this.titleService.setTitle('Home | @esss/ng-xform');
     this.fields = [
+      new NumberField({
+        key: 'number',
+        label: 'Number'
+      }),
       new TextField({
         key: 'name',
         label: 'Name',
@@ -111,10 +117,7 @@ export class HomeComponent implements OnInit, OnDestroy {
             searchOnFocus: true,
             searchable: true,
             optionLabelKey: 'name',
-            optionValueKey: 'alpha3Code',
-            validators: [
-              Validators.required
-            ]
+            optionValueKey: 'alpha3Code'
           })
         ]
       }),
@@ -210,6 +213,7 @@ export class HomeComponent implements OnInit, OnDestroy {
 
   populate() {
     this.xformComponent.setValue({
+      number: 7846509780989089080945.654,
       name: 'Customer',
       email: 'customer@mail.com',
       type_tags: [2],