?
Solved

problem with angular 2 select tag in an update form

Posted on 2016-11-24
10
Medium Priority
?
44 Views
Last Modified: 2016-12-10
Hi
i have an update form with a select tag. the users should choose libraries the selected album should belong to.
the error i'm getting is when i use the formControlName:
                    <div class="form-group">
                    <select class="form-control" multiple >
                        <option selected disabled>Choose A Library:</option>
                        <option  *ngFor="let lib of libraries | async"  value="{{lib.$key}}">{{lib.name}}</option>
                    </select>
                    </div>

Open in new window

this works. i get a list of all the libraries.
but when i use this:
                    <div class="form-group">
                    <select class="form-control" multiple formControlName="AlbumLibs">
                        <option selected disabled>Choose A Library:</option>
                        <option  *ngFor="let lib of libraries | async"  value="{{lib.$key}}">{{lib.name}}</option>
                    </select>
                    </div>

Open in new window


i get this error message:
EXCEPTION: Error in ./AlbumsComponent class AlbumsComponent - inline template:48:58 caused by: values.map is not a function

i initialize my form like this on the ngOnInit :
      this.albumForm = new FormGroup({
        'AlbumName': new FormControl(
          '',
          Validators.required
        ),
        'AlbumLibs': new FormControl(
          ''
        ),
        'imagePathAlbum': new FormControl(
          ''
        ),
        'imagePlaceAlbum': new FormControl(
          ''
        )
      });

Open in new window


what am i missing here? on the add album form i have this and it works without any issues:
                    <div class="form-group">
                    <select class="form-control" multiple formControlName="AlbumLibs">
                        <option selected disabled>Choose A Library:</option>
                        <option *ngFor="let lib of libraries | async"  value="{{lib.$key}}">{{lib.name}}</option>
                    </select>
                    </div>

Open in new window



what am i missing here?

best regards
0
Comment
Question by:derrida
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 4
10 Comments
 
LVL 58

Assisted Solution

by:Julian Hansen
Julian Hansen earned 2000 total points
ID: 41900204
I have no experience with this library or the error but it would seem the issue is it expects the data to be an array and your data is an object.
0
 
LVL 1

Author Comment

by:derrida
ID: 41900209
hi Julian
when i log: console.log(this.selectedAlbum['libs']);

it is an array:
the results
0
 
LVL 58

Expert Comment

by:Julian Hansen
ID: 41900234
Is that data from Firebase?
0
Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

 
LVL 1

Author Comment

by:derrida
ID: 41900238
yes
i get an album and in it a nested libs, which are the libraries this album belong to
0
 
LVL 58

Expert Comment

by:Julian Hansen
ID: 41900250
What is different about the page where you get the error? You say it works in the other two situations - something must be different.
0
 
LVL 1

Author Comment

by:derrida
ID: 41900268
i really can't see the difference . that is the first thing i tried to figure out.
in any case this is the whole error message i'm getting, maybe you'll see there something i don't?
the whole error
0
 
LVL 58

Expert Comment

by:Julian Hansen
ID: 41900323
Can you post the code for this - or provide a link. Basically in your opening post you have laid out some HTML that is identical but that produces different results in the browser so the problem is in code you have not posted.
0
 
LVL 1

Author Comment

by:derrida
ID: 41900334
so this is my template:
<div id="album-items-container">

  <div  class="album-item-card" *ngFor="let album of albums | async">
    <div [routerLink]="['/album',album.$key,libId]" class="albumView">
    <img  src="{{album.imagePath}}" alt="{{album.name}}">
    <h5>{{album.name}}</h5>
    </div>
    <div class="albumcontrolswrapper">
        <span class="albumcontrols" id="editAlbum">
            <a (click)="onSelectAlbum(album)"  >
            <i class="fa fa-pencil" aria-hidden="true"></i>
            </a>
        </span>

        <span class="albumcontrols" id="deleteAlbum">
            <a (click)="deleteAlbum(album.$key,album.imagePlace)" >
            <i class="fa fa-times" aria-hidden="true"></i>
            </a>
        </span>
    </div> 


  </div>


</div>



<div class="admin-bar">
    <mom-rsmodal  *ngIf="whichModal == 'albumedit'"   (modalStateChanged)="changeModalState($event)" [modalState]="parentModalState">
            <div header>
                <h4 class="text-center cmn-t-underline">{{formTitle}}</h4>
            </div>
            <div body>
                <form (ngSubmit)="onAlbumSubmit()" [formGroup]="albumEditForm" class="container-fluid">
                    <div class="form-group">
                        <label for="AlbumName">Name:</label>
                        <input 
                            type="text" 
                            class="form-control" 
                            id="AlbumName"
                            [ngModel]="selectedAlbum.name"
                            formControlName="AlbumName">
                    </div>
                    <!--this is the problem area-->
                    <!--formControlName="AlbumLibs"-->
                    <div class="form-group">
                    <select class="form-control" multiple  formControlName="AlbumLibs">
                        <option selected disabled>Choose A Library:</option>
                        <option  *ngFor="let lib of libraries | async"  value="{{lib.$key}}">{{lib.name}}</option>
                    </select>
                    </div>
                    <!--this is the problem area-->

                    <div class="form-group">
                        <input 
                            type="text" 
                            class="form-control" 
                            id="imagePathAlbum"
                            [ngModel]="selectedAlbum.imagePath"
                            formControlName="imagePathAlbum">
                    </div>
                    <div class="form-group">
                        <input 
                            type="text" 
                            class="form-control" 
                            id="imagePlaceAlbum"
                            [ngModel]="selectedAlbum.imagePlace"
                            formControlName="imagePlaceAlbum">
                    </div>

                    <div class="form-group">
                        <label for="fileAlbumButton">Choose An Image:</label>
                        <div class="uploadbox">
                        <input (change)="getAlbumFile()"  type="file" value="uploadAlbum" id="fileAlbumButton" >
                            <div class="progress">
                            <progress value="0" max="100" id="Albumuploader"  >
                                this is it
                            </progress>
                            </div>
                        </div>
                        <div *ngIf="currentAlbumImage" id="AlbumPicPreview">
                        <hr>
                        <img id="albumImgPreview" [src]="currentAlbumImage" alt="Album current image">
                        <hr>
                        </div>

                    <div *ngIf="imageTypesMsg" class="alert alert-danger" role="alert">
                        the allowed types are: jpg,jpeg,png
                    </div>
                    <div *ngIf="imageSizeMsg" class="alert alert-danger" role="alert">
                        the Image size is too large. The allowed size is: {{displayFileSize}} and the chosen image size is: {{fileSize}}
                    </div>
                    <div *ngIf="imageErrorMsg" class="alert alert-danger" role="alert">
                        There was an error uploading the image !!
                    </div>
                    <div *ngIf="imageCompleteMsg" class="alert alert-success" role="alert">
                        There Image upload was successful !!
                    </div>


                    </div>

                    <button  [disabled]="checkAlbumForSubmit()" type="submit" class="btn btn-default">Edit Album</button>
                </form>
            </div>
            <div footer>
                
            </div>           
            
    </mom-rsmodal>
</div>

Open in new window


notice where is say:  <!--this is the problem area-->

and this is my component:
import { Component, OnInit, Input } from '@angular/core';
import { Library } from '../library';
import { AlbumsService } from './albums.service';
import { LibrariesService } from '../libraries.service';
import { FormGroup,FormControl,Validators,FormArray } from '@angular/forms';
import { RsmodalComponent } from '../../rsmodal/rsmodal.component';



@Component({
  selector: 'mom-albums',
  templateUrl: './albums.component.html',
  styleUrls: ['./albums.component.scss']
})
export class AlbumsComponent implements OnInit {



  @Input() lib:string;
  @Input() libId:string;
  albums;
  whichModal: string = '';
  formTitle: string;
  parentModalState: boolean;
  albumEditForm: FormGroup;
  selectedAlbum: Object;
  libraries;
  currentAlbumImage = null;

  constructor(
    private albumService:AlbumsService,
    private libService:LibrariesService
  ) { }

  ngOnInit() {
    //console.log(this.libId);
    this.albums = this.albumService.getAlbumsByLibrary(this.libId);
    //console.log(this.albums);

    //get all the libraries
    this.libraries = this.libService.getTheLibs();
    //console.log(this.libraries);
    

      this.albumEditForm = new FormGroup({
        'AlbumName': new FormControl(
          '',
          Validators.required
        ),
        'AlbumLibs': new FormControl(
          ''
        ),
        'imagePathAlbum': new FormControl(
          ''
        ),
        'imagePlaceAlbum': new FormControl(
          ''
        )
      });
    
  }


  onSelectAlbum(album){
    //console.log(album);
    this.whichModal = 'albumedit';
    this.parentModalState = true;
    this.selectedAlbum = album;
    //console.log(this.selectedAlbum['libs']);
    
    
  }

  getAlbumFile(){

  }

  changeModalState(){
    this.parentModalState = false;
    this.albumEditForm.reset();
  }

  checkAlbumForSubmit(){

  }

  onAlbumSubmit(){
    console.log(this.albumEditForm);
  }

  deleteAlbum(albumId,albumIP){

  }

}

Open in new window

0
 
LVL 1

Accepted Solution

by:
derrida earned 0 total points
ID: 41901329
ok i fixed the issue. wgen initializing the form field i use string and it should be an array:
        'AlbumLibs': new FormControl(
          []
        ),

Open in new window

0
 
LVL 1

Author Closing Comment

by:derrida
ID: 41905457
i fixed the issue. see the best comment
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

764 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question