Как выбрать несколько флажков с помощью тегов ясности проекта - PullRequest
Новая
       29

Как выбрать несколько флажков с помощью тегов ясности проекта

0 голосов
/ 16 января 2019

Это форма 

<form class="clr-form clr-form-compact" (ngSubmit)="onFormSubmit()">
  <clr-checkbox-container clrInline>

    <clr-checkbox *ngFor="let item of categories"
                  [(clrChecked)]="item.running"
                  [clrDisabled]="item.disabled" [(ngModel)]="model.options" name="search">
      {{ item }}
    </clr-checkbox>
  </clr-checkbox-container>

  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="pull-right">
        <button type="submit" class="btn btn-primary">Search</button>
      </div>
    </div>
  </div>

</form>

Это компонент 

categories = ['option1','option2'];

model: search = {
    options:''
};


onFormSubmit(){
    console.log(this.model); 
}

В журнале консоли должна быть напечатана опция 1, опция 2, если выбраны оба параметра, или опция 1, если выбрана только опция 1.

1 Ответ

0 голосов
/ 16 января 2019

Вы используете неправильные компоненты формы для флажков и смешиваете старые и новые формы. В версии 1.0+ вы должны использовать что-то похожее на следующее. У вас будет массив категорий, содержащий объект { selected: false, label: 'checkbox label' } для каждой опции, и он будет отслеживать состояние выбранного на основе, если он отмечен. 

<form clrForm (ngSubmit)="onFormSubmit()">
  <clr-checkbox-container clrInline>
    <clr-checkbox-wrapper *ngFor="let item of categories">
    <input type="checkbox" clrCheckbox [(ngModel)]="item.selected" name="search" value=>
      <label>{{ item.label }}</label>
    </clr-checkbox-wrapper>
  </clr-checkbox-container>
</form>
...