Solved

problem with angular 2 select tag in an update form

Posted on 2016-11-24
10
8 Views
Last Modified: 2016-11-29
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 51

Assisted Solution

by:Julian Hansen
Julian Hansen earned 500 total points
Comment Utility
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
Comment Utility
hi Julian
when i log: console.log(this.selectedAlbum['libs']);

it is an array:
the results
0
 
LVL 51

Expert Comment

by:Julian Hansen
Comment Utility
Is that data from Firebase?
0
 
LVL 1

Author Comment

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

Expert Comment

by:Julian Hansen
Comment Utility
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
Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

 
LVL 1

Author Comment

by:derrida
Comment Utility
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 51

Expert Comment

by:Julian Hansen
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
i fixed the issue. see the best comment
0

Featured Post

Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
A safe way to clean winsxs folder from your windows server 2008 R2 editions
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…

763 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

Need Help in Real-Time?

Connect with top rated Experts

7 Experts available now in Live!

Get 1:1 Help Now