AlertOptions weird behaviour

I have a 3 AlertOptions inside one of the pages of my project. Two of them carries radio buttons and one has checkboxes.

The code for the entire page goes as follows:

import { Component } from '@angular/core';
import { AlertController, NavController, NavParams } from 'ionic-angular';
import { FormBuilder, FormGroup} from "@angular/forms";
import { JobsProvider } from "../../providers/jobs/jobs";
import { RestProvider } from "../../providers/rest/rest";
import { JobUserProvider } from "../../providers/job-user/job-user";
import {DateHelper} from "../../helper/date-helper";


@Component({
  selector: 'page-add-a-job',
  templateUrl: 'add-a-job.html',
})
export class AddAJobPage {

    addAJobForm: FormGroup;

    //form inputs
    customer_name: string;
    customer_po: string;
    job_description: string;

    //FOR THE JOB TYPES
    private jobTypes = [[]];
    private jobTypeSelected = '';

    //FOR THE FOCUSED PEOPLE
    private employees = [[]];
    private employeesSelected = [];
    private employeesNamesSelected = [];

    //FOR THE PRIORITY LEVELS
    private priorityLevels = [[]];
    private priorityLevelSelected = '';



  constructor(
      private jobUserProvider: JobUserProvider,
      private restProvider: RestProvider,
      private jobsProvider: JobsProvider,
      public alertController: AlertController,
      public  formBuilder: FormBuilder,
      public navCtrl: NavController,
      public navParams: NavParams) {


  }

  /*
  Getting all the info necessary from the client
   */

  ionViewDidLoad() {
      //get the job types available
      this.jobsProvider.getJobTypes()
          .subscribe((types: any) =>{
          //store them in a multidimensional array for easy access to both id and name
              for(let type of types){
                  this.jobTypes[type.id] = type.name;
              }
          });

      //get the priority levels available
      this.jobsProvider.getPriorityLevels()
          .subscribe((levels: any) =>{
              //store them in a multidimensional array for easy access to both id and name
              for(let level of levels){
                  this.priorityLevels[level.id] = level.name;
              }
          });

      //get the users available
      this.restProvider.getUsers()
          .subscribe((employees: any)=>{
            //store them in a multidimensional array for easy access to both id and name
              for (let employee of employees){
                  this.employees[employee.id] = employee;
                  console.log('Employees retrieved:', employees)
              }
          })
  }

  //close the modal
  closeModal(){
    this.navCtrl.pop();
  }


  /*
  Pop up window for type of job.
   */
  presentTypeOfJob(){
      let prompts = this.alertController.create({
          title: 'Type of Job',
          message: 'What type of job is this?',
          inputs: [
              {
                  type: 'radio',
                  label: this.jobTypes[1],
                  value: this.jobTypes[1]
              },
              {
                  type: 'radio',
                  label: this.jobTypes[2],
                  value: this.jobTypes[2]
              }
          ],
          buttons: [
              {
                  text: "Cancel"
              },
              {
                  text: "Confirm",
                  handler: data =>{
                      //value goes to a variable for easy submission
                      this.jobTypeSelected = data
                  }
              }
          ]
      });
      prompts.present();
  }

  /*
  Pop up window for focused people on the job
   */
  presentFocusForJob(){
      let prompt = this.alertController.create();
      prompt.setTitle("Focused Employees")
      prompt.setMessage("Which employees would you like to focus for this job?")

      for(let i=1; i < this.employees.length; i++){
          prompt.addInput({
              type: 'checkbox',
              label: this.employees[i].name,
              value: this.employees[i]
          });
      }

      prompt.addButton('Cancel');
      prompt.addButton({
          text: 'Confirm',
          handler: employees =>{
              console.log('Checkbox Data:', employees);
                  this.employeesSelected = employees;
                  for(let employee of this.employeesSelected){
                      this.employeesNamesSelected.push(employee.name);
                  }
          }
      });
      prompt.present();
  }

  /*
  Pop up window for priority levels
   */
  presentPriorityLevels(){
      let prompt = this.alertController.create({
          title: 'Priority Level',
          message: 'What Level of priority does this job has?',
          inputs: [
              {
                  type: 'radio',
                  label: this.priorityLevels[1],
                  value: this.priorityLevels[1],
              },
              {
                  type: 'radio',
                  label: this.priorityLevels[2],
                  value: this.priorityLevels[2]
              },
              {
                  type: 'radio',
                  label: this.priorityLevels[3],
                  value: this.priorityLevels[3]
              }
          ],
          buttons: [
              {
                  text: "Cancel"
              },
              {
                  text: "Confirm",
                  handler: data =>{
                      //value goes to a variable for easy submission
                      this.priorityLevelSelected = data
                  }
              }
          ]
      });
      prompt.present();
  }

  /*
  Adds a job to the db.

    missing input for:
    - quote
   */
  addJob(){
      let job = {
          po_number: this.customer_po,
          customer: this.customer_name,
          description: this.job_description,
          quote: 20,
          job_type_id: this.jobTypes.indexOf(this.jobTypeSelected),
          priority_level_id: this.priorityLevels.indexOf(this.priorityLevelSelected),
          created_at: DateHelper.formatDate(new Date())
      };

      this.jobsProvider
          .addJob(job)
          .subscribe(data => {
              //if no employees have been selected for focus, do NOT send information to the api
              if(!this.employeesSelected.length || this.employeesSelected.length === 0){
                  this.closeModal();
              }else {
                  //once the job is added, use the same job to add the focused employees selected
                  for (let i = 0; i < this.employeesSelected.length; i++) {
                      this.jobUserProvider.addJobUser(data.id, this.employeesSelected[i].id)
                          .subscribe(data => {
                              console.log(data);
                          })
                      //once the last one has been added, close the modal
                      if (i == this.employeesSelected.length - 1) {
                          this.closeModal();
                      }
                  }
              }
              //clear the selected employees
              this.employeesSelected = [];
          });
  }
}

I am using phpStorm as IDE and inside my three methods presentTypeOfJob(), presentFocusForJob, and presentPriorityLevels I get errors that say:

Argument of type ‘{ title: string; message: string; inputs: { type: string; label: any[]; value: any[]; }[]; button…’ is not assignable to parameter of type ‘AlertOptions’. Types of property ‘inputs’ are incompatible. Type ‘{ type: string; label: any[]; value: any[]; }[]’ is not assignable to type ‘AlertInputOptions[]’. Type ‘{ type: string; label: any[]; value: any[]; }’ is not assignable to type ‘AlertInputOptions’. Types of property ‘value’ are incompatible. Type ‘any[]’ is not assignable to type ‘string’.

The code does not run at first build. However, if I really just delete the ‘s’ from ‘inputs’ in alerOptions, save, let it build, added again, and let it build IT WILL WORK.

I am not sure if there is deprecated methods in my code but if anybody knows something about this please let me know

It’s telling you literally exactly what the problem is.

Alert input options are defined as follows:

export interface AlertInputOptions {
  type?: string;
  name?: string | number;
  placeholder?: string;
  value?: string;
  label?: string;
  checked?: boolean;
  disabled?: boolean;
  id?: string;
  handler?: Function;
  min?: string | number;
  max?: string | number;
}

So label has to be a string and value has to be a string.

You’ve declared jobTypes as an array of arrays: private jobTypes = [[]];

So when you try to set label to this.jobTypes[1] and value to this.jobTypes[1], you are trying to set label and value to untyped ARRAYS. It’s explicitly telling you about value in this case, telling you that that property value must be a string, it cannot be an array of anything. Again I’m just repeating what the error message is telling you.

1 Like

I get that part and thank you, yet what I still don’t understand is how is this still working for me… i mean, the first time it throws the error, but doing the little hack i mentioned it runs smooth!