Mdb Multiple Select failure on Angular 4

  1. MDB Home Page
  2. Support Main Page
  3. MDB Angular
Topic: Mdb Multiple Select failure on Angular 4

Ayush Gupta asked 8 years ago

Multiple select never updates the values in the select of angular and hence the selected values are never accessible. Code: //app.component.ts import { Component,AfterViewInit } from '@angular/core'; import { NgForm } from '@angular/forms'; declare const $: any; @Component({ selector: 'my-app', template: ` <form (ngSubmit)="onSubmit(f)" #f="ngForm"> <select class="mdb-select" multiple ngModel name="multipleselect" #multipleselect="ngModel" (change)="onChange($event)"> <option value="" disabled selected>Choose your option</option> <option data-icon="https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-1.jpg" value="1">Option 1</option> <option data-icon="https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-1.jpg" value="2">Option 2</option> <option data-icon="https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-1.jpg" value="3">Option 3</option> </select> <label>Example label</label> <button type="submit" class="btn btn-success">Submit</button> </form> <br><br><br><br><br><br> <p>Select value: {{ multipleselect.value }}</p> <p>Select valid: {{ multipleselect.valid }}</p> <p>Form value: {{ f.value | json }}</p> <p>Form valid: {{ f.valid }}</p> `, }) export class AppComponent implements AfterViewInit { ngAfterViewInit(){ $(document).ready(function() { $('.mdb-select').material_select(); }); } onSubmit(form: NgForm) { console.log(form); } onChange(event: any){ console.log(event); } } //index.html <!DOCTYPE html> <html> <head> <title>Angular QuickStart</title> <base href="/"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/styles.css"> <!-- Font Awesome --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css"> <!-- Bootstrap core CSS --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- Material Design Bootstrap --> <link href="css/mdb.min.css" rel="stylesheet"> <!-- Your custom styles (optional) --> <link href="css/style.css" rel="stylesheet"> <!-- Polyfill(s) for older browsers --> <script src="node_modules/core-js/client/shim.min.js"></script> <script src="node_modules/zone.js/dist/zone.js"></script> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <!-- SCRIPTS --> <!-- JQuery --> <script type="text/javascript" src="js/jquery-2.2.3.min.js"></script> <!-- Bootstrap tooltips --> <script type="text/javascript" src="js/tether.min.js"></script> <!-- Bootstrap core JavaScript --> <script type="text/javascript" src="js/bootstrap.min.js"></script> <!-- MDB core JavaScript --> <script type="text/javascript" src="js/mdb.js"></script> <script> System.import('main.js').catch(function(err) { console.error(err); }); </script> </head> <body> <my-app>Loading AppComponent content here ...</my-app> </body> </html> //app.module.ts import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; import { FormsModule } from '@angular/forms'; @NgModule({ imports: [ BrowserModule, FormsModule ], declarations: [ AppComponent ], bootstrap: [ AppComponent ] }) export class AppModule { } Neither the select nor the form received any value after submission. I tried with the change event also but it never gets invoked. Is there any way to access the selected values in multiple select?

vizmedia pro answered 8 years ago

I had the same problem https://mdbootstrap.com/forums/topic/conflicts-between-mdb-angular2-ngform/

Adrian Sawicki answered 8 years ago

Hello, Thanks for linking to another topic. I hope it solved your problem.

Piotr Bender answered 7 years ago

Hello,In response to your issue, I wanted to let you know about just released MDBootstrap Angular kit, that may be a sufficient solution to this or any other issues you have had with Angular integration so far.The kit can be found at the following link:https://mdbootstrap.com/angular/It contains all the components you could find in MDB jQuery version.We encourage you to try it out and report any bugs or issues at contact@mdbootstrap.com with [Angular] prefix or create a thread on this forum.Have a great day!

Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

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

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags
angular failure multiple-select
Related topics
0
Router Link
4
Update to Angular 11, when will there be an update for mdb 10
2
Searchable select with very large dataset
2
need save button in multi select dropdown in angular similar to jquery.
2
Support for Angular 10.0.1
About author
Ayush Gupta
0Support score
1Questions 0Answers
0Snippets likes 0Snippets