在 Angular 2 多选下拉菜单中实现验证

Question

我想知道可以在 cuppa 实验室的 Angular 2 多选下拉菜单中实现引导验证。我浏览了文档，但找不到任何文档。 基本上，如果用户没有选择任何值，例如我可以使用[ngClass]="{'is-invalid': someThing.invalid}" 的普通输入，我想以红色突出显示下拉列表。这是我的 HTML 和我尝试过的内容：

<angular2-multiselect name="countries"
  [(ngModel)]="myModel.countries" #countries2="ngModel"
  presentInCountries [data]="countries"
  [settings]="presentInCountriesdropdownSettings"
  (ngModelChange)="multiselectChangeCountries($event)">
</angular2-multiselect>

如果所选国家/地区为 0，我尝试将布尔值设置为 true，然后应用：

this.presentInCountriesdropdownSettings.classes += ' is-invalid';

但这不起作用。有什么方法可以实现吗？

Answer 1

尝试像这样使用ReactiveForm 和Required 验证器：

Component.ts

import { Component } from '@angular/core';
import { FormBuilder, Validators } from "@angular/forms";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  constructor(private fb: FormBuilder) { }

  /*########### Form ###########*/
  registrationForm = this.fb.group({
    countryName: ['', [Validators.required]]
  })

Component.html

<form [formGroup]="registrationForm" (ngSubmit)="onSubmit()">
  <angular2-multiselect name="countries"
     formControlName="countryName"
     presentInCountries [data]="countries"
     [settings]="presentInCountriesdropdownSettings"
     (ngModelChange)="multiselectChangeCountries($event)">
  </angular2-multiselect>
</form>