Angular 5 使用动态名称验证控件

Question

我认为这很简单。我有以下 HTML 块按预期工作：

<label class="mb-0 form-label">
    Doc Part
</label>
<input type="number" name="DocPart" #DocPart="ngModel" class="form-control"
       [(ngModel)]="docSetting.DocPart" required/>
<div [hidden]="DocPart.valid || DocPart.pristine" class="alert alert-danger">
    This field is required
</div>

上面很简单，当控件变脏和为空时显示所需的消息。现在我有一些表单，其中控件的名称必须是动态的，如下所示：

<label class="mb-0 form-label">
    Doc Part
</label>
<input type="number" name="DocPart{{j}}" class="form-control"
       [(ngModel)]="docSetting.DocPart" required/>
<div hidden="DocPart{{j}}.valid" class="alert alert-danger">
    This field is required
</div>

这行不通。所需的消息永远不会显示。必须有一种简单的方法来访问像这样的动态命名的控件。怎么样？

在上面的代码中，docSetting 是 ngFor 循环中的一个对象。 DocPart 是该对象的属性之一。

Answer 1

这应该可行，因为 *ngFor 为模板变量创建了一个 'scope'：

<label class="mb-0 form-label">
    Doc Part
</label>
<input type="number" name="DocPart{{j}}" #myInput="ngModel" class="form-control"
       [(ngModel)]="docSetting.DocPart" required/>
<div hidden="myInput.valid" class="alert alert-danger">
    This field is required
</div>

你有自己独特的名字，但#myInput可以相同。

Angular 5 使用动态名称验证控件

Angular 5 Validate Control with Dynamic Name

validation

controls

dynamic

angular