Solved

problem with angular 2 select tag in an update form

Posted on 2016-11-24
10
29 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 55

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 55

Expert Comment

by:Julian Hansen
ID: 41900234
Is that data from Firebase?
0
Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
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 55

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 55

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

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Index on a Table 6 25
Create an automated page index 9 53
jQuery on Submit 4 45
Html Newline 7 21
In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
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…

830 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