Solved

problem with angular 2 select tag in an update form

Posted on 2016-11-24
10
23 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
  • 6
  • 4
10 Comments
 
LVL 54

Assisted Solution

by:Julian Hansen
Julian Hansen earned 500 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 54

Expert Comment

by:Julian Hansen
ID: 41900234
Is that data from Firebase?
0
Optimizing Cloud Backup for Low Bandwidth

With cloud storage prices going down a growing number of SMBs start to use it for backup storage. Unfortunately, business data volume rarely fits the average Internet speed. This article provides an overview of main Internet speed challenges and reveals backup best practices.

 
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 54

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 54

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

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

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'…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
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…

770 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