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

时间:2020-08-31 19:30:14

标签: angular multi-select

我想知道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';

但这不起作用。有什么办法可以实现?

1 个答案:

答案 0 :(得分:0)

尝试像这样使用ReactiveFormRequired验证程序:

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>