fix(forms): table field handling number input by ng if directive

angular form control is not typed. The input type is dinamically assigned and form control don't catch him, now by ngIf directive if type is number is rendered the dedicated input with type number.

src/e2e-app/mat-table-field/table-field-e2e-module.ts

@@ -20,16 +20,17 @@
  *
  */
 
-import {AjfFormsModule as CoreFormsModule} from '@ajf/core/forms';
+import {AjfFormsModule as AjfCoreFormsModule} from '@ajf/core/forms';
 import {AjfFormsModule} from '@ajf/material/forms';
+import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
-
 import {MaterialTableFieldE2E} from './table-field-e2e';
 
 @NgModule({
   imports: [
     AjfFormsModule,
-    CoreFormsModule,
+    AjfCoreFormsModule,
+    CommonModule,
   ],
   declarations: [
     MaterialTableFieldE2E,

src/e2e-app/mat-table-field/table-field-e2e.html

@@ -1,4 +1,4 @@
 <h1>Table Field Example</h1>
-<section>
+<section *ngIf="form$|async as form">
   <ajf-form [form]="form"></ajf-form>
 </section>

src/e2e-app/mat-table-field/table-field-e2e.ts

@@ -1,5 +1,8 @@
 import {AjfForm, AjfFormSerializer} from '@ajf/core/forms';
 import {Component} from '@angular/core';
+import {ActivatedRoute, Params} from '@angular/router';
+import {Observable, of} from 'rxjs';
+import {filter, map, startWith, switchMap} from 'rxjs/operators';
 
 const formSchema: any = {
   nodes: [{
@@ -26,15 +29,56 @@ const formSchema: any = {
   }]
 };
 
+const formulaFormSchema: any = {
+  nodes: [{
+    parent: 0,
+    id: 7,
+    name: 'table1',
+    label: 'Table Field Example',
+    nodeType: 3,
+    nodes: [{
+      id: 701,
+      parent: 7,
+      name: 'row',
+      rows: [[
+        'row__0__0',
+        'row__0__1',
+        {formula: 'row__0__0 + row__0__1', edit: false},
+      ]],
+      label: '2.1',
+      editable: true,
+      nodeType: 0,
+      fieldType: 11,
+      rowLabels: [
+        'Row 1',
+      ],
+      columnLabels: ['number 1', 'number 2', 'sum']
+    }]
+  }]
+};
+
 @Component({
   selector: 'table-field-e2e',
   templateUrl: 'table-field-e2e.html',
 })
 export class MaterialTableFieldE2E {
+  routeStream$: Observable<Params> = this._route.queryParams;
   formSchema: string = JSON.stringify(formSchema);
-  form: AjfForm;
+  form$: Observable<AjfForm>;
+  formulas$: Observable<boolean> = this.routeStream$.pipe(
+      filter(p => p != null), switchMap((params) => {
+        let res = false;
+        if (params.formulas != null && params.formulas === 'true') {
+          res = true;
+        }
+        return of(res);
+      }),
+      startWith(false));
 
-  constructor() {
-    this.form = AjfFormSerializer.fromJson(formSchema);
+  constructor(private _route: ActivatedRoute) {
+    this.form$ = this.formulas$.pipe(
+        map((formulas) => formulas ? formulaFormSchema : formSchema),
+        map(f => AjfFormSerializer.fromJson(f)),
+    );
   }
 }

src/ionic/forms/table-field.html

@@ -15,13 +15,29 @@
             <ng-template #controlCell>
               <ng-container *ngIf="c|ajfGetTableCellControl as contr">
                 <ng-container *ngIf="contr != null">
-                  <input
+                  <ng-container
                     *ngIf="contr.show && (node.rows[row-1][column]|ajfIsCellEditable); else plainTextCell"
-                    (focusout)="contr!.show = false"
-                    [type]="contr.type"
-                    [formControl]="contr.control"
-                    autofocus
-                  />
+                  >
+                    <ng-container
+                      *ngIf="contr.type === 'number';else genericInput"
+                    >
+                      <input
+                        (focusout)="contr!.show = false"
+                        type="number"
+                        [formControl]="contr.control"
+                        autofocus
+                      />
+                    </ng-container>
+                    <ng-template #genericInput>
+                      <input
+                        (focusout)="contr!.show = false"
+                        [type]="contr.type"
+                        [formControl]="contr.control"
+                        (keydown.tab)="goToNextCell($event, row, column)"
+                        autofocus
+                      />
+                    </ng-template>
+                  </ng-container>
                   <ng-template #plainTextCell>
                     <span class="ajf-table-cell" (click)="goToCell(row, column)"
                       >{{ contr.control!.value | ajfTranslateIfString |

src/material/forms/table-field.e2e.spec.ts

@@ -1,3 +1,4 @@
+
 import {browser, by, element, ExpectedConditions, Key} from 'protractor';
 
 describe('ajf-table-field', () => {
@@ -43,4 +44,20 @@ describe('ajf-table-field', () => {
     await browser.wait(ExpectedConditions.presenceOf(
         element(by.css('tr:nth-of-type(2) td:nth-of-type(3) input'))));
   });
+
+  it('should types two input values and check the formula sum result', async () => {
+    await browser.get('/mat-table-field/?formulas=true');  // use formulas schema
+    const cells = await element.all(by.tagName('td')).getWebElements();
+    await cells[5].click();  // click on the first cell value
+    let input = element(by.css('input'));
+    expect(await input.isPresent()).toBe(true);
+    await input.sendKeys(1);        // write 1 in the input value
+    await input.sendKeys(Key.TAB);  // remove focus
+    await cells[6].click();         // click on the second cell value
+    input = element(by.css('input'));
+    expect(await input.isPresent()).toBe(true);
+    await input.sendKeys(1);        // write 1 in the input value
+    await input.sendKeys(Key.TAB);  // remove focus
+    expect(await cells[7].getText()).toBe('2');
+  });
 });

src/material/forms/table-field.html

@@ -15,14 +15,31 @@
             <ng-template #controlCell>
               <ng-container *ngIf="c|ajfGetTableCellControl as contr">
                 <ng-container *ngIf="contr != null">
-                  <input
+                  <ng-container
                     *ngIf="contr!.show && (node.rows[row-1][column]|ajfIsCellEditable); else plainTextCell"
-                    (focusout)="contr!.show = false"
-                    [type]="contr.type"
-                    [formControl]="contr.control"
-                    (keydown.tab)="goToNextCell($event, row, column)"
-                    autofocus
-                  />
+                  >
+                    <ng-container
+                      *ngIf="contr.type === 'number';else genericInput"
+                    >
+                      <input
+                        (focusout)="contr!.show = false"
+                        type="number"
+                        [formControl]="contr.control"
+                        (keydown.tab)="goToNextCell($event, row, column)"
+                        autofocus
+                      />
+                    </ng-container>
+                    <ng-template #genericInput>
+                      <input
+                        (focusout)="contr!.show = false"
+                        [type]="contr.type"
+                        [formControl]="contr.control"
+                        (keydown.tab)="goToNextCell($event, row, column)"
+                        autofocus
+                      />
+                    </ng-template>
+                  </ng-container>
+
                   <ng-template #plainTextCell>
                     <span class="ajf-table-cell" (click)="goToCell(row, column)"
                       >{{ contr.control!.value | ajfTranslateIfString |