Topic: How do I set the mdb-select field from typescript while using reactive forms?

William White free asked 4 years ago


Expected behavior

When the user selects an object the object properties will then populate the fields.

Actual behavior

However, when using .setValue() to set the mdb-select field that field does not set itself to the selected option.

Resources (screenshots, code snippets etc.)

this.propertyForm.controls.testField.setValue(selectedObject.testFieldD.toString());

Below is a screen shot where you can see the input field populate correctly nut the mdb-select field still is blank.

enter image description here


William White free commented 4 years ago

So actually I answered my own question. Looked at the documentation for mdb-select and found this way of setting the field.

this.testForm = new FormGroup({ testSelect: new FormControl('1') });

Not sure if there is a better way about setting the value without re creating the form though?

https://mdbootstrap.com/docs/angular/forms/select-1/#docsTabsOverview


Arkadiusz Idzikowski staff commented 4 years ago

SetValue method should work correctly in this case. What is the exact value returned by this code selectedObject.testFieldD.toString()?


William White free commented 4 years ago

@Arkadiusz Idzikowski I see why it was not working for me now. I forgot I had custom css on the .mdb-select class which was causing it not to populate in the UI. I took that custom css away and SetValue works correctly now.

Thanks for jogging my memory!


FREE CONSULTATION

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

Status

Closed

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 8.0.0
  • Device: Web
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No