Select default value doesn&#039;t work with latest Angul

Topic: Select default value doesn't work with latest Angular

gravitycreative premium asked 4 years ago

Added two tests into MDB page as suggested in documentation

when rendering in dom the name should be passing through to name attribute to both object But the dynamic one didn't get this. I am pretty sure opt.id has value otherwise label should be empty as well and drop down has data

enter image description here

TS. DynamicModalComponent implements OnInit { @ViewChild('dynamicModalForm', { static: true }) dynamicModalForm: NgForm; dynamicObj: any = {}; formComponentsOption: any[] = []; dateOptionsSelect= [ { value: '1', label: 'Today' }, { value: '2', label: 'Yesterday' }, { value: '3', label: 'Last 7 days' }, { value: '4', label: 'Last 30 days' }, { value: '5', label: 'Last week' }, { value: '6', label: 'Last month' } ]; selectedValue = '2';

ngOnInit() {

} }

This caused default value for a dynamic select is not working at all! Please advise.

Arkadiusz Idzikowski staff commented 4 years ago

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

gravitycreative premium commented 4 years 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 4 years 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 4 years 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 4 years 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;

}

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);

<pre class="prettyprint"><code>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;
</code></pre>

}

Please insert min. 15 characters.

Arkadiusz Idzikowski staff commented 4 years 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

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Opened

Specification of the issue

ForumUser: Premium
Premium support: Yes
Technology: MDB Angular
MDB Version: 8.8.2
Device: Laptop
Browser: Chrome
OS: MacOS
Provided sample code: No
Provided link: No

gravitycreative

Premium support 5Support score
1Questions 0Answers 1Snippets