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为模板变量创建了“范围”：

<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可以是相同的。