如何基于动态表中的输入复选框在输入文本字段上设置条件必需的验证器

时间:2018-12-24 08:45:11

标签: html angular typescript required requiredfieldvalidator

我正根据表格左侧的复选框,使“数据”输入字段为必填字段。也就是说,如果选中了该框,则仅针对该特定字母,“数据”输入字段变为“必填”。

字母是从数据库动态加载的,并且没有硬编码。

我的方法是这样的:

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

expected output the code the current output of the above code

1 个答案:

答案 0 :(得分:0)

必须完全写入[(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=[{},{},{},{},{}]

请注意,“项目”必须是对象数组