在Angular 5中,ng-multiselect-dropdown是一个常用的多选下拉框组件。它可以让用户从一个下拉列表中选择多个选项。
验证ng-multiselect-dropdown的方法如下:
<form [formGroup]="myForm">
<ng-multiselect-dropdown
[placeholder]="'Select options'"
[data]="dropdownOptions"
formControlName="selectedOptions"
></ng-multiselect-dropdown>
</form>
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.css']
})
export class MyComponent implements OnInit {
myForm: FormGroup;
dropdownOptions: any[] = [
{ id: 1, name: 'Option 1' },
{ id: 2, name: 'Option 2' },
{ id: 3, name: 'Option 3' }
];
ngOnInit() {
this.myForm = new FormGroup({
selectedOptions: new FormControl(null, Validators.required)
});
}
}
<form [formGroup]="myForm">
<ng-multiselect-dropdown
[placeholder]="'Select options'"
[data]="dropdownOptions"
formControlName="selectedOptions"
></ng-multiselect-dropdown>
<div *ngIf="myForm.get('selectedOptions').invalid && myForm.get('selectedOptions').touched">
Please select at least one option.
</div>
</form>
这样,当用户没有选择任何选项时,将显示一个错误消息。
推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云云数据库MySQL。
领取专属 10元无门槛券
手把手带您无忧上云