Select default value doesn't work with latest Angular

Arkadiusz Idzikowski staff commented a year ago

Do you use MDB Angular v8.8.2? Please add the HTML code as well to your first post.

gravitycreative premium commented a year ago

<form #dynamicModalForm="ngForm">
  <div *ngFor="let opt of formComponentsOption"  class="md-form" >
    <div *ngIf="opt.display" >
        <ng-container *ngIf="opt.tag == 'select'">
            <mdb-select name = "{{opt.id}}"  [(ngModel)]="dynamicObj[opt.id]" label={{opt.label}} [options]="opt.dataSource" placeholder="Choose your option" (ngModelChange)="dropdownOnchange($event)"></mdb-select>    
        </ng-container>
      </div>
  </div>
</div>

</form> 

gravitycreative premium commented a year ago

Yes, i was given MDB Angular v8.8.2 pro after purchase about a month ago. As you can see i placed name attribute into this, but it didn't get rendered. But if i hard coded with a variable in DynamicModalComponent and assign it to name, it will show up. Dynamic assignment doesn't work. Please advise.

Arkadiusz Idzikowski staff commented a year ago

Please share full code on which we will be able to reproduce this problem. 'dynamicObj' is empty and we don't know how and when you initialize it. We also don't know what value is passed to the ngModel input.

gravitycreative premium commented a year ago

Sorry, if you try to call the modal up a component like this. You will be able to replicate.

import { Component, OnInit } from '@angular/core';import { MDBModalRef, MDBModalService } from 'ng-uikit-pro-standard';import { DynamicModalComponent } from '../../shared/components/dynamic-modal/dynamic-modal.component';

@Component({ selector: 'app-quiz', templateUrl: './quiz.component.html', styleUrls: ['./quiz.component.scss']})export class QuizComponent implements OnInit { modalRef: MDBModalRef; modalConfig = { class: 'modal-dialog-centered', heading: 'Add New Quiz' }; sectionDataSource: any[] | null; formOption = [ { "id": "sectionId", "label": "Section Id", "type": "dropdown-list", "tag": "select", "dataSource": [ { value: '1', label: 'Option 1' }, { value: '2', label: 'Option 2' }, { value: '3', label: 'Option 3' }, ], "errorMsg": "Section is required", "required": true, "display": true } ];

constructor(private modalService: MDBModalService, ) { }

ngOnInit() { }

onEdit() { this.modalRef = this.modalService.show(DynamicModalComponent, this.modalConfig);

this.modalRef.content.heading = 'Edit quiz';
this.modalRef.content.modalObjType = "quiz";
this.modalRef.content.actionType = "update";
const copy = {
  sectionId:2,
};
this.modalRef.content.dynamicObj = copy;
this.modalRef.content.formComponentsOption = this.formOption;

}

}

Arkadiusz Idzikowski staff commented a year ago

We still don't know what value ngModel receives here: [(ngModel)]="dynamicObj[opt.id]". Please update your first post with full code on which we will be able to reproduce that or create a simple demo app and send it to a.idzikowski@mdbootstrap.com.

Our example with preselected value works correctly so it's probably not a problem with mdb-select component: https://mdbootstrap.com/docs/angular/forms/select/#preselect-template