Topic: Preselect multiple Values in mdb-select

dimitribocquet pro asked 6 years ago


Hello, I'm trying to preselect some values in my mdb-select, but it does'nt work. Here is my code : HTML :
<mdb-select [options]="genresSelectList" [multiple]="true" placeholder="Genres" (selected)="genreSelected($event)" (deselected)="genreDeselected($event)"></mdb-select>
TS :
export class MyComponent implements OnInit {

	genresSelectList = [];

	ngOnInit() {
		this._plantService.findById(val)
			.subscribe((plant: Plant) => {
				plant.genres.forEach((genre: any) => {
					this.genresSelectList = [...this.genresSelectList, {value:genre.id, label:genre.name, selected:true}];
				});
			})
		;
	}
}

I cannot use ngModel because i'm using reactive form. Thank you for your help.

Arkadiusz Idzikowski staff answered 6 years ago


Hello, Here is an example: HTML:
<form [formGroup]="testForm">

<divclass="row">

<divclass="col-md-6">

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

<label>Example label</label>

</div>

</div>

</form>
TS:
optionsSelect= [

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

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

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

];

testForm: FormGroup;

ngOnInit() {

this.testForm=newFormGroup({

testSelect:newFormControl('')

});

this.testForm.controls.testSelect.setValue(['1', '2']);

}
Regards, Arek

Please insert min. 20 characters.

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: 6.2.3
  • Device: Macbook Pro
  • Browser: Chrome
  • OS: 10.13.6
  • Provided sample code: Yes
  • Provided link: No