Как установить условный обязательный валидатор для текстовых полей ввода на основе флажка ввода в динамической таблице

Я пытаюсь сделать поле ввода «данные» обязательным на основе флажка, расположенного слева от таблицы. то есть, если флажок установлен, то поле ввода «данные» становится «обязательным» только для этой конкретной буквы.

Письма загружаются динамически из базы данных и не являются жестко запрограммированными.

Мой подход был таким:

[required]="letters[idx].checkbox==true" <!-- line 32 -->

Но, похоже, это не работает. Есть ли другой способ сделать это?

<form name="editForm" role="form" (ngSubmit)="save()" #editForm="ngForm">
    <div class="form-row">
        <div class="form-group" *>
            <table class="table">
                <thead>
                    <tr>
                        <th>
                            <span>Select</span>
                        </th>
                        <th>
                            <span>Name</span>
                        </th>
                        <th>
                            <span>Data</span>
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor="let letter of letters ; let idx = index;">
                        <td>
                            <div class="form-group">
                                <div class="form-check">
                                    <input type="checkbox" class="form-check-input" name="check-box-letters" id="field_ check-box-letters" [(ngModel)]=" letter.checkbox "
                                    />
                                </div>
                            </div>
                        </td>
                        <td>
                            {{letter.name}}
                        </td>
                        <td>
                            <input type="text " class="form-control " name="data " id="field_data " [(ngModel)]="letters[idx].data " [required]="letters[idx].checkbox==true "
                            />
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</form>

ожидаемый вывод кода текущий вывод приведенного выше кода


typescript angular requiredfieldvalidator html required
person en021    schedule 24.12.2018    source источник
comment
Не могли бы вы создать stackbliz?   -  person SeleM    schedule 24.12.2018
comment
Подход с реактивной формой был бы более полезным, чем форма, управляемая шаблоном. Используя реактивные формы, вы можете добавлять и обновлять валидаторы во время выполнения. Это также полезно, если ваша форма станет более сложной в будущем.   -  person mulla.azzi    schedule 24.12.2018

Ответы (1)


arrow_upward
0
arrow_downward

должно быть достаточно написать [(ngModel)]="letter.data" [required]="letter.checkbox" https://stackblitz.com/edit/angular-96egrw?file=src%2Fapp%2Fapp.component.html

<div *ngFor="let item of items;let i=index">
    <input type="checkbox" id="check" [(ngModel)]="item.checkbox">
  <input id="name" name="name" [(ngModel)]="item.name" 
         [required]="item.checkbox" #name="ngModel">
   <span *ngIf="name.invalid">invalid</span>
</div>
{{items|json}}

где у вас есть в .ts, например.

items=[{},{},{},{},{}]

Смотрите, что "items" должен быть массивом объектов

person Eliseo    schedule 24.12.2018