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>

在Angular 2多选下拉列表中实施验证

1 个答案: