如何在新表单(clrForm)结构中使用选择输入?
我正在使用Clarity版本0.12.4。他们引入了一些新的表格结构。 很好,但是我无法让选择输入起作用。
答案 0 :(得分:2)
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”。