CODEWITHSUNDEEP
angularvmware-clarity
Albert Hoekstra
Albert Hoekstra

Reputation: 128

VM Clarity - clrForm select input

How can I use a select input in the new form (clrForm) structure?

I'm using Clarity version 0.12.4. They have introduced some new form structure. It's quite nice but I cant'get the select input to work..

Upvotes: 0

Views: 2812

Answers (1)

Karthik RP
Karthik RP

Reputation: 1078

The documentation of Clarity is still under progress.

However, I got this working., Its pretty straight forward.

Similar to input, you need to add 'clrInput' directive to select and put the entire select inside clr-input-container tag.

 <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: Don't forget to add 'ClarityModule' and 'ClrFormsNextModule' in imports of your module.

Upvotes: 2

Related Questions