VM Clarity - clrForm select 输入

Question

如何在新表单 (clrForm) 结构中使用 select 输入？

我使用的是 Clarity 版本 0.12.4。他们引入了一些新的表单结构。这很好，但我无法让 select 输入工作..

Answer 1

Clarity 的文档仍在开发中。

不过，我成功了。它非常简单。

与输入类似，您需要将'clrInput'指令添加到select并将整个select放在clr-input-container标签中。

 <div class="row">
    <div class="col-12 col-sm-6 col-md-4">
      <clr-input-container>
        <label>Landmark</label>
        <input clrInput type="text" [(ngModel)]="landmark" name="landmark" required maxlength="200"/>
        <clr-control-error *clrIfError="'minLength'">Must be less than 200 characters</clr-control-error>
      </clr-input-container>
    </div>

    <div class="col-12 col-sm-6 col-md-4">
      <div class="select">
        <clr-input-container>
          <label>City</label>
          <select clrInput id="city" [(ngModel)]="city" name="city">
            <option *ngFor="let city of cities" [value]="city.id">{{city.name}}</option>
          </select>
        </clr-input-container>
      </div>
    </div>

    <div class="col-12 col-sm-6 col-md-4">
      <div class="select">
        <clr-input-container>
          <label>City</label>
          <select clrInput id="state" [(ngModel)]="state" name="city">
            <option *ngFor="let state of states" [value]="state.id">{{state.name}}</option>
          </select>
        </clr-input-container>
      </div>
    </div>
  </div>

PS：不要忘记在模块的导入中添加 'ClarityModule' 和 'ClrFormsNextModule'。

VM Clarity - clrForm select 输入

VM Clarity - clrForm select input

angular

vmware-clarity