小编Asg*_*shi的帖子

我正在尝试制作一个应该看起来像这样的搜索栏:

http://s22.postimg.org/ecaxmtj8x/search_bar.png

我正在使用bootstrap 3.在下面的代码中我有3个按钮,其中"menu 2"按钮打开一个下拉菜单.我想"菜单1"按钮也可以打开菜单.但到目前为止,我的尝试都失败了.

当我尝试将按钮分组到一个btn组时,它会从联接的搜索栏中分离出来,这不是我想要的.有没有办法使用输入组类在div中有2个菜单？

<div class="input-group input-group-lg">
    <input type="text" class="form-control">
    <div class="input-group-btn">
        <button class="btn btn-primary" type="button">
            <span class="glyphicon glyphicon-search"></span>
        </button>
        <button class="btn btn-primary" type="button">
            test 1&nbsp;&nbsp;<span class="caret"></span>
        </button>
        <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
            test 2&nbsp;&nbsp;<span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu">
            <li><a href="#">Option 1</a></li>
            <li><a href="#">Option 2</a></li>
            <li><a href="#">Option 3</a></li>
        </ul>
    </div>
</div>

如何验证mat-chip已将添加到中mat-chip-list。我正在使用ReactiveForms。我已经尝试过required验证器。

该值可以是名称列表，因此在提交表单之前，我需要确保名称列表中至少有1个名称。如果列表为空，mat-error则应显示错误消息。使用required验证器会使表单无效，而不管在列表中添加名称如何。

编辑：反应形式

我试图做一个自定义验证器，现在使用的是反应式表单，而不是模板驱动的表单，但是我无法使它正常工作。我编辑了以下代码以反映我的更改，并创建了此https://stackblitz.com/edit/angular-4d5vfj

的HTML

<form [formGroup]="myForm">
  <mat-form-field class="example-chip-list">
    <mat-chip-list #chipList formArrayName="names">
      <mat-chip *ngFor="let name of myForm.get('names').controls; let i=index;"
        [formGroupName]="i"
        [selectable]="selectable"
        [removable]="removable"
        (removed)="remove(myForm, i)">
        <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
      </mat-chip>

       <input placeholder="Names"
          [matChipInputFor]="chipList"
          [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
          [matChipInputAddOnBlur]="addOnBlur"
          (matChipInputTokenEnd)="add($event, asset)">
    </mat-chip-list>
    <mat-error>Atleast 1 name need to be added</mat-error>
  </mat-form-field>
</form>

TS

import {COMMA, ENTER} from '@angular/cdk/keycodes';
import {Component} from '@angular/core';
import {FormGroup, FormControl, FormBuilder, FormArray} from '@angular/forms';
import {MatChipInputEvent} from '@angular/material';

@Component({
  selector: 'chip-list-validation-example', …