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

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

0 голосов
/ 24 декабря 2018

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

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

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

[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>

ожидаемый вывод кода текущий вывод кода выше

1 Ответ

0 голосов
/ 24 декабря 2018

должно быть достаточно записать [(ngModel)] = "letter.data" [обязательно] = "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" должен быть массивом объектов

...