Условная проверка Angular 2/5 с флажком

У меня есть реактивная форма, в которой есть таблица с флажком и некоторые пользовательские данные в каждой строке. Я хочу сделать так, чтобы, если пользователь установил флажок, необходимо заполнить соответствующие поля, например. если установлен флажок 11+, но соответствующие пользовательские вводы, то есть цена не заполнены, и пользователь пытается нажать кнопку добавления, тогда он не должен отправлять форму и должен предоставить сообщение. Я не уверен, как условно применить эту логику.

Форма в ТС:

this.addSubjectForm = new FormGroup({
  'type' : new FormControl(null, Validators.required),
  'subject' : new FormControl(null, Validators.required),
  'discount' : new FormControl(null),
  'levelDefinition' : new FormGroup({
    '11+' : new FormControl(null),
    'KS3' : new FormControl(null),
    'GCSE' : new FormControl(null),
    'A-Level' : new FormControl(null),
    'Degree' : new FormControl(null)
  })

HTML-таблица / форма:

<form [formGroup]="addSubjectForm" (ngSubmit)="onAddSubject()">
      <!-- the first three inputs (type, subject and discount) are not included here to reduce the amount of code shown in the question -->
      <div formGroupName="levelDefinition">
        <table class="table table-bordered table-condensed table-hover">
            <thead>
                <tr>
                  <th class="text-center">
                        <input type="checkbox" name="all" 
                        (change)="isSelected = !isSelected" />
                    </th>
                    <th>Level</th>
                    <th>Price</th>
                    <th>Discounts</th> 
                </tr>
            </thead>
            <tbody>
              <tr *ngFor="let level of levels ; let i = index">
                <td class="text-center" >
                    <input type="checkbox" 
                    value="{{level.id}}" 
                    appHighlightOnCheck
                    formControlName="{{level}}"
                    [checked]="isSelected" />
                </td>
                <td class="text-center">{{ level }}</td>
                <td>
                  <input
                  type="text"
                  class="form-control">
                </td>
                <td>
                  <input
                  type="text"
                  class="form-control">
                </td>
              </tr>
            </tbody>
          </table>
        </div>  
    </form>
    <button class="btn btn-primary" type="submit">Add</button>

person Idris.AH    schedule 05.04.2018    source источник
comment
Возможно, вы могли бы использовать настраиваемые валидаторы, подобные этому: stackoverflow.com/questions/31788681/   -  person Ben Cottrell    schedule 06.04.2018


Ответы (1)


Это можно сделать с помощью настраиваемого валидатора с несколькими полями. Вам нужно будет вложить 2 элемента управления формой в группу форм (как в ts, так и в html). Затем вам нужно создать собственный валидатор и прикрепить его к этой formGroup.

person Udi Mazor    schedule 05.04.2018