How to select a default option in ng2 using child component

Question

I'm building an app where I built an input component that can adapt to be and text input, a select, text area, etc...

So I create a model for that, where I send all the information it needs so the component can adapt to what I need. I'm also using formCOntrol and not ngModel for the forms (after reading some pages that came up to be the best option)

The issue I have is that I cannot preselect a value for the ng-select (previously I was using select component and it was sowrking fine.

So in the create form, I have like 20 inputs of different types and everything is fine... The issue appears when I try to do the Edit action of something, as I need to have all the inputs prepopulated with the original value. For all the components is ok, as I'm sharing the formControlName with the model of the entity I want to update, but for the ng2-select I get the following error:

ERROR TypeError: selectedItems.map is not a function

I googled for the possibles solutions but none works for me.. Maybe as I'm using a ng-select inside another component....

So here is my code. This is the route:

ngOnInit() {
    this.supplierService.get(this.item.id).subscribe( (response : JsonResponse)=> {
      if(response.success){
        this.item = response.data;
        this.item.logo = this.supplierService.getImage(this.item);
        this.getState();

      }
  else{
    this.error = response.code;
  }
});

} As you can see, first I get the item (object to edit). Then I get the states (items that will be shown as option in the ng-select

And after I get the states, I create the formControl:

this.form = new FormGroup({
                name: new FormControl(this.item.name,Validators.required),
                last_name: new FormControl(this.item.last_name, Validators.required),
                fantasy_name: new FormControl(this.item.fantasy_name, Validators.required),
                real_name: new FormControl(this.item.real_name, Validators.required),
                state: new FormControl(this.item.state ? this.item.state : '', Validators.required),
                city: new FormControl(this.item.city ? this.item.city : '', Validators.required),
                phone: new FormControl(this.item.phone),
                fax: new FormControl(this.item.fax),
                discount: new FormControl(this.item.discount),
                address: new FormControl(this.item.address),
                apartment: new FormControl(this.item.apartment),
                cuit: new FormControl(this.item.cuit, Validators.required),
                email: new FormControl(this.item.email, Validators.required),
                floor: new FormControl(this.item.floor),
                mobile_phone : new FormControl(this.item.mobile_phone)
              });

Finally, I create the component for each input, here you have the state example:

let state : InputForm = new InputForm();
    state.setSelect("state", 'COMPONENT.COMMON.STATE', this.states, 6);
    this.formElement.elements.push(state);

There I set that this component will be a select, I the first param is the name in the formControlName (in this way, it knows which is the formCOntrolName so It can set this value as default or assign the new one on submit. Then, the label, and then the list of items to show. (The last param is the size of the input).

And this is the template for my component corresponding to select:

<ng-select *ngIf="element.type == 'select' && (element.items && element.items.length > 0)" (typed)="typed(element.id, $event)" formControlName="{{element.id}}" [allowClear]="true" [items]="element.items" (selected)="change(element.id, $event)" id="{{element.id}}" (removed)="removed($event)" (typed)="typed($event)" placeholder="{{element.placeholder | translate}}"></ng-select>

I tried with [active], [data], [initData] but nothing works. I always get the error

ERROR TypeError: selectedItems.map is not a function

I dont't know if I should be assigning the default value in other way.The error is in line

this._active = selectedItems.map(function (item)

And in that case, the selectedItems is State type (my custom type)I don't know if I should do a transformation before that. The type has id and text value.

In summary, the error is just in "edit" actions.. I mean, when the element has a value preselected, if not it works fine.

I'm using angular 4.3.3

See the below image from the line that is failing:

There you can see that the object is sent, and also the map function is undefined.

Answer 1

You are getting an error because selecteItems, isn't an array.

In your code

this.form = new FormGroup({
                name: new FormControl(this.item.name,Validators.required),
                last_name: new FormControl(this.item.last_name, Validators.required),
                fantasy_name: new FormControl(this.item.fantasy_name, Validators.required),
                real_name: new FormControl(this.item.real_name, Validators.required),
                state: new FormControl(this.item.state ? this.item.state : '', Validators.required),
                city: new FormControl(this.item.city ? this.item.city : '', Validators.required),
                phone: new FormControl(this.item.phone),
                fax: new FormControl(this.item.fax),
                discount: new FormControl(this.item.discount),
                address: new FormControl(this.item.address),
                apartment: new FormControl(this.item.apartment),
                cuit: new FormControl(this.item.cuit, Validators.required),
                email: new FormControl(this.item.email, Validators.required),
                floor: new FormControl(this.item.floor),
                mobile_phone : new FormControl(this.item.mobile_phone)
              });

You need to change the state definition to:

state: new FormControl(this.item.state ? [this.item.state] : '', Validators.required)

Setting the item to an array will remove the error and allow you to iterate through using map.