Issue in using formControlName in mdb-select

Topic: Issue in using formControlName in mdb-select

mdbangular_es free asked 6 years ago

Hi,

I am not able to use the formControlName in mdb-select.

I get the following error:

Error: There is no FormControl instance attached to form control element with name: 'selectedDomain'

Old Code:

"<select formControlName="selectedDomain" class="form-control form-control-sm" (change)="onEmailChange($event)" (blur)="onEmailLeave($event)">
<option *ngFor="let tDomain of domains" [value]="tDomain.value">
{{ tDomain.label }}
</option>
</select>"
New Code:

<mdb-select formControlName="selectedDomain" [options]="domains" (change)="onEmailChange($event)" (blur)="onEmailLeave($event)"></mdb-select>

Please let me know how I can bind mdb-select inside the form.

Thanks

Damian Gemza staff commented 6 years ago

Dear mdbangular_es, Material Select is a premium component, and according to our system, there’s no PRO badge within your profile Please, provide us a number of your order or registered email to confirm your access to MDB Pro components and premium support. Send it to me on email: d.gemza@mdbootstrap.com Best, Damian

Add comment

Damian Gemza staff answered 6 years ago

0 0 Best answer

Dear mdbangular_es,

You can use our Select component without any problems in form element. Please check my code. I'm using there a FormControlName attribute, FormGroup, FormBuilder, Validators classes from @angular/forms module.

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

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

<label>Example label</label>

</form>

</div>

</div></pre>
</div>
app.component.ts:
<div>
<pre>import { Component, OnInit } from '@angular/core';

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

@Component({

selector:'app-root',

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

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

})

export class AppComponent implements OnInit {

optionsSelect:Array<any>;

form:FormGroup;

constructor(publicfb:FormBuilder) {

this.form=fb.group({

select: ['', Validators.required]

});

}

ngOnInit() {

console.log(this.form.controls['select']);

this.optionsSelect= [

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

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

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

];

}

}</pre>
</div>
app.module.ts:
<div>
<pre>import { BrowserModule } from '@angular/platform-browser';

import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';

import { MDBBootstrapModulesPro, MDBSpinningPreloader } from 'ng-uikit-pro-standard';

import { AppComponent } from './app.component';

import { ReactiveFormsModule, FormsModule } from '@angular/forms';

@NgModule({

declarations: [

AppComponent

imports: [

BrowserModule,

MDBBootstrapModulesPro.forRoot(),

FormsModule,

ReactiveFormsModule

bootstrap: [AppComponent],

providers: [MDBSpinningPreloader],

schemas: [ NO_ERRORS_SCHEMA ]

})

export class AppModule { }</pre>
</div>
The key to the success is to:
<pre> import {FormsModule, ReactiveFormsModule} from '@angular/forms';</pre>
Best Regards,

Damian

Please insert min. 20 characters.

Dear mdbangular_es, You can use our Select component without any problems in form element. Please check my code. I'm using there a FormControlName attribute, FormGroup, FormBuilder, Validators classes from @angular/forms module. app.component.html:

<div class="row">

<div class="col-md-6">

<form [formGroup]="form">

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

<label>Example label</label>

</form>

</div>

</div>

app.component.ts:

import { Component, OnInit } from '@angular/core';

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

@Component({

selector:'app-root',

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

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

})

export class AppComponent implements OnInit {

optionsSelect:Array<any>;

form:FormGroup;

constructor(publicfb:FormBuilder) {

this.form=fb.group({

select: ['', Validators.required]

});

}

ngOnInit() {

console.log(this.form.controls['select']);

this.optionsSelect= [

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

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

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

];

}

}

app.module.ts:

import { BrowserModule } from '@angular/platform-browser';

import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';

import { MDBBootstrapModulesPro, MDBSpinningPreloader } from 'ng-uikit-pro-standard';

import { AppComponent } from './app.component';

import { ReactiveFormsModule, FormsModule } from '@angular/forms';

@NgModule({

declarations: [

AppComponent

],

imports: [

BrowserModule,

MDBBootstrapModulesPro.forRoot(),

FormsModule,

ReactiveFormsModule

],

bootstrap: [AppComponent],

providers: [MDBSpinningPreloader],

schemas: [ NO_ERRORS_SCHEMA ]

})

export class AppModule { }

The key to the success is to:

 import {FormsModule, ReactiveFormsModule} from '@angular/forms';

Best Regards, Damian

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: Free
Premium support: No
Technology: MDB Angular
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

mdbangular_es

20Support score
5Questions 1Answers 0Snippets