Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

problem with angular 2 select tag in an update form

Posted on 2016-11-24
10
Medium Priority
?
62 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 61

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 61

Expert Comment

by:Julian Hansen
ID: 41900234
Is that data from Firebase?
0
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.

 
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 61

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 61

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

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

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

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
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

578 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