fix(alert): inputs have id

fixes #10603

Author: manucorporat

src/components/alert/alert-component.ts

@@ -9,6 +9,7 @@ import { NavParams } from '../../navigation/nav-params';
 import { NavOptions } from '../../navigation/nav-util';
 import { Platform } from '../../platform/platform';
 import { ViewController } from '../../navigation/view-controller';
+import { AlertInputOptions, AlertOptions, AlertButton } from './alert-options';
 
 
 /**
@@ -39,7 +40,7 @@ import { ViewController } from '../../navigation/view-controller';
 
         '<template ngSwitchCase="checkbox">' +
           '<div class="alert-checkbox-group">' +
-            '<button ion-button="alert-checkbox-button" *ngFor="let i of d.inputs" (click)="cbClick(i)" [attr.aria-checked]="i.checked" [disabled]="i.disabled" class="alert-tappable alert-checkbox" role="checkbox">' +
+            '<button ion-button="alert-checkbox-button" *ngFor="let i of d.inputs" (click)="cbClick(i)" [attr.aria-checked]="i.checked" [attr.id]="i.id" [disabled]="i.disabled" class="alert-tappable alert-checkbox" role="checkbox">' +
               '<div class="alert-checkbox-icon"><div class="alert-checkbox-inner"></div></div>' +
               '<div class="alert-checkbox-label">' +
                 '{{i.label}}' +
@@ -51,7 +52,7 @@ import { ViewController } from '../../navigation/view-controller';
         '<template ngSwitchDefault>' +
           '<div class="alert-input-group">' +
             '<div *ngFor="let i of d.inputs" class="alert-input-wrapper">' +
-              '<input [placeholder]="i.placeholder" [(ngModel)]="i.value" [type]="i.type" class="alert-input">' +
+              '<input [placeholder]="i.placeholder" [(ngModel)]="i.value" [type]="i.type" [attr.id]="i.id" class="alert-input">' +
             '</div>' +
           '</div>' +
         '</template>' +
@@ -73,16 +74,7 @@ import { ViewController } from '../../navigation/view-controller';
 export class AlertCmp {
   activeId: string;
   descId: string;
-  d: {
-    cssClass?: string;
-    message?: string;
-    title?: string;
-    subTitle?: string;
-    mode?: string;
-    buttons?: any[];
-    inputs?: any[];
-    enableBackdropDismiss?: boolean;
-  };
+  d: AlertOptions;
   enabled: boolean;
   hdrId: string;
   id: number;
@@ -147,9 +139,9 @@ export class AlertCmp {
     });
 
     data.inputs = data.inputs.map((input, index) => {
-      return {
+      let r: AlertInputOptions = {
         type: input.type || 'text',
-        name: isPresent(input.name) ? input.name : index,
+        name: isPresent(input.name) ? input.name : index + '',
         placeholder: isPresent(input.placeholder) ? input.placeholder : '',
         value: isPresent(input.value) ? input.value : '',
         label: input.label,
@@ -158,6 +150,7 @@ export class AlertCmp {
         id: isPresent(input.id) ? input.id : `alert-input-${this.id}-${index}`,
         handler: isPresent(input.handler) ? input.handler : null,
       };
+      return r;
     });
 
 
@@ -291,7 +284,7 @@ export class AlertCmp {
 
   bdClick() {
     if (this.enabled && this.d.enableBackdropDismiss) {
-      let cancelBtn = this.d.buttons.find(b => b.role === 'cancel');
+      var cancelBtn = this.d.buttons.find(b => (<AlertButton>b).role === 'cancel');
       if (cancelBtn) {
         this.btnClick(cancelBtn);
 

src/components/alert/alert-options.ts

@@ -5,18 +5,25 @@ export interface AlertOptions {
   message?: string;
   cssClass?: string;
   mode?: string;
-  inputs?: Array<AlertInputOptions>;
-  buttons?: Array<any>;
+  inputs?: AlertInputOptions[];
+  buttons?: (AlertButton|string)[];
   enableBackdropDismiss?: boolean;
 }
 
 export interface AlertInputOptions {
   type?: string;
-  name?: string;
+  name?: string | number;
   placeholder?: string;
   value?: string;
   label?: string;
   checked?: boolean;
   disabled?: boolean;
   id?: string;
+  handler?: Function;
 }
+
+export interface AlertButton {
+  text?: string;
+  role?: string;
+  handler?: Function;
+};

src/components/alert/alert.ts

@@ -2,7 +2,7 @@ import { Injectable } from '@angular/core';
 
 import { App } from '../app/app';
 import { AlertCmp } from './alert-component';
-import { AlertOptions, AlertInputOptions } from './alert-options';
+import { AlertOptions, AlertInputOptions, AlertButton } from './alert-options';
 import { isPresent } from '../../util/util';
 import { NavOptions } from '../../navigation/nav-util';
 import { ViewController } from '../../navigation/view-controller';
@@ -67,7 +67,7 @@ export class Alert extends ViewController {
   /**
    * @param {any} button Alert button
    */
-  addButton(button: any): Alert {
+  addButton(button: AlertButton|string): Alert {
     this.data.buttons.push(button);
     return this;
   }

src/components/alert/test/basic/app.module.ts

@@ -98,6 +98,7 @@ export class E2EPage {
     });
     alert.addInput({
       name: 'name2',
+      id: 'name2-id',
       value: 'hello',
       placeholder: 'Placeholder 2'
     });