using material select with angular reactive forms

Topic: using material select with angular reactive forms

utkuferuz pro asked 6 years ago

Hi, I am using the below code as a custom generic select control in my project. I need to use select with reactive forms but I only see examples with dynamic forms. Could you please guide me regarding to this issue?

Start your code here

Add comment

Shajee Lawrence pro answered 6 years ago

0 0 Best answer

Please insert min. 20 characters.

The ReactiveFormsModule was already added to the app.module file. After lot of googling, it started to work after I placed ngDefaultControl on the element. Perhaps you may want to explain why that is necessary - for the sake of other users.
I also have another suggestion, you should start making more components in the pro version at least. I was in need of a dualList and I had to make my own. Do you have a roadmap on the components that you are planning in the pro version? Just wanted to check before I buy. Thanks !!

Damian Gemza staff commented 6 years ago

Dear Shajee, Unfortunately, we don't have a roadmap which presents components which will be added in future releases. ngDefaultControl directive is needed on components which overwrites the default HTML input element. This directive is needed in case of using Reactive Forms features, or Forms Modules features. We take a look at Material Select, what's exactly wrong there. Best Regards, Damian

Add comment

Damian Gemza staff answered 6 years ago

0 0 Best answer

Dear <a href="https://mdbootstrap.com/support/?user=utkuferuz">utkuferuz</a>,

Do you need something like this? Here's example of ReactiveForms with Material Select:

.html:
<div>
<pre><div class="row">

<mdb-select formControlName="select" [options]="optionsSelect" placeholder="Choose your option"></mdb-select>

<label>Example label</label>

</form>

<p>Value: {{form.value.select}}</p>

</div>

</div></pre>
</div>
.ts:
<div>
<pre>import { FormGroup, FormControl } from '@angular/forms';

@Component({

selector:'app-root',

templateUrl:'./app.component.html',

styleUrls: ['./app.component.scss']

})

export class AppComponent implements OnInit {

form=newFormGroup({

select:newFormControl()

});

optionsSelect:Array<any>;

ngOnInit() {

this.optionsSelect= [

{ value: '1', label: 'Option 1' },

{ value: '2', label: 'Option 2' },

{ value: '3', label: 'Option 3' },

];

}

}</pre>
</div>
Please check my code, and modify it on own hand.

Best Regards,

Damian

Please insert min. 20 characters.

Dear utkuferuz, Do you need something like this? Here's example of ReactiveForms with Material Select: .html:

<div class="row">

<div class="col-md-6 mx-auto my-5">

<form [formGroup]="form">

<mdb-select formControlName="select" [options]="optionsSelect" placeholder="Choose your option"></mdb-select>

<label>Example label</label>

</form>

<p>Value: {{form.value.select}}</p>

</div>

</div>

.ts:

import { FormGroup, FormControl } from '@angular/forms';

@Component({

selector:'app-root',

templateUrl:'./app.component.html',

styleUrls: ['./app.component.scss']

})

export class AppComponent implements OnInit {

form=newFormGroup({

select:newFormControl()

});

optionsSelect:Array<any>;

ngOnInit() {

this.optionsSelect= [

{ value: '1', label: 'Option 1' },

{ value: '2', label: 'Option 2' },

{ value: '3', label: 'Option 3' },

];

}

}

Please check my code, and modify it on own hand. Best Regards, Damian

Shajee Lawrence pro commented 6 years ago

Does not work... ERROR Error: No value accessor for form control with name: 'select' I am getting this problem since morning and I have spend already 6 hours - I do not see enough good documentation either on reactive forms. Am I missing something? Is there a way I can send you the screenshot of the code and the error please?

Arkadiusz Idzikowski staff commented 6 years ago

Dear Shajee Lawrence, Please make sure you added ReactiveFormsModule to your app.module file. If it still won't work please paste here your html, ts and app.module code. Best, Arek

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

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

utkuferuz

Pro User 0Support score
1Questions 0Answers 0Snippets