Question

如何在新表单（clrForm）结构中使用选择输入？

我正在使用Clarity版本0.12.4。他们引入了一些新的表格结构。很好，但是我无法让选择输入起作用。

Answer 1

Clarity的文档仍在进行中。

但是，我的工作正常了。

类似于输入，您需要添加'clrInput'指令来选择整个选择并将其放置在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清晰度-clrForm选择输入

1 个答案: