Topic: Conflicts between MDB & Angular2 ngForm

vizmedia pro asked 6 years ago

<div class="md-form"> <select class="browser-default mdb-select colorful-select dropdown-primary" id="sel_skrzynki" name="newskrzynka" [(ngModel)]="newskrzynka"> <option *ngFor="let skrzynka of skrzynki" [ngValue]="skrzynka.Id" [selected]="skrzynka.Default">{{skrzynka.Name}}</option> </select> <label>skrzynka:</label> </div> in controller: this.newskrzynka is null, its wrong

Piotr Bender free answered 5 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: 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 with [Angular] prefix or create a thread on this forum.Have a great day!

Adrian Sawicki free answered 6 years ago

To be honest this select shouldn't be used with angular2. The ugly workaround is to bind the select value to form on submit. You can do it by :
form.value.selekt = $('.select-dropdown')[0].value
I hope it helps. regards, Adrian

vizmedia pro answered 6 years ago

I'm using Angular-Cli I add MDB in angular-cli.json: "styles": [ "styles.css", "css/bootstrap.min.css", "css/mdb.min.css" ], "scripts": [ "js/jquery-3.1.1.min.js", "js/tether.min.js", "js/bootstrap.min.js", "js/mdb.min.js" ], in template TestComponent: -------------------------- <form #tdForm="ngForm" (ngSubmit)="submit(tdForm)" style="margin-left: 200px;"> <div class="md-form"> <input type="text" id="form1" name="form1" class="form-control" ngModel> <label for="form1" class="">Ten input jest OK</label> </div> <select class="mdb-select" id="selekt" name="selekt" ngModel> <option value="" disabled selected>Choose your option</option> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> </select> <label>Tutaj nie binduje z ngModel</label> <button type="submit">Send</button> </form> in controller: -------------- import { Component, OnInit, ElementRef, ViewChild } from '@angular/core'; import { FormsModule } from '@angular/forms'; declare let $:any; @Component({ selector: 'app-test', templateUrl: './test.component.html', styleUrls: ['./test.component.css'] }) export class TestComponent implements OnInit { constructor( private elRef:ElementRef ){ } ngOnInit() { $('.mdb-select').material_select(); } submit(form) { console.log(form.value); } } When I send a form, I get an object on the console: Object {form1: "jakis tekst", selekt: ""} The 'selekt' property is empty

Adrian Sawicki free answered 6 years ago

Hello, Could you show me your code? I've checked it and in default select everything works fine. You won't get the same effect as in material select because this is a matter of something more than styles. We are working on Angular2 version od MDB. Regards, Adrian

vizmedia pro answered 6 years ago

Nfgorm NG2 does not work with mdb styled objects

I'm not entirely clear on how angular 2 isn't supported; MDB just styles existing elements - why would that interfere with angular?

Adrian Sawicki free answered 6 years ago

Hello Vizmedia, We aren't currently supporting angular 2. However, we are working on it. Regards, Adrian

vizmedia pro answered 6 years ago

Without mdb everything works fine

Please insert min. 20 characters.


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


Specification of the issue

  • User: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No