Question

我正在使用角度6生成动态输入字段。还验证，以便我使用模板参考。但这不起作用。

下面是我的代码。

<div *ngFor="let item of attributeList;let i = index">
<input type="{{item.type}}" class="form-control" id="usr_{{item.type}}_{{i}}" [(ngModel)]="item.value" name="usr{{i}}" #lastName="ngModel" required />

<div class="error-mesg" [hidden]="lastName.valid || (lastName.pristine && !form.submitted)">
    Field is required
  </div>
</div>

Answer 1

您在评论部分部分回答了自己的问题。

唯一有效的检查是对lastName进行的。这意味着在执行代码时，lastName是未定义的。

如果可以确定未定义，可以执行以下操作。

<div *ngFor="let item of attributeList;let i = index">
<input type="{{item.type}}" class="form-control" id="usr_{{item.type}}_{{i}}" [(ngModel)]="item.value" name="usr{{i}}" #lastName="ngModel" required />

<div class="error-mesg" [hidden]="lastName?.valid || (lastName?.pristine && !form.submitted)">
    Field is required
  </div>
</div>

请注意，如果没有设置属性https://angular.io/guide/template-syntax#the-safe-navigation-operator----and-null-property-paths，则通过加载空白内容可以使安全导航成为可能。

编辑：

如果在某些情况下希望隐藏包含警告的div，则可以使用* ngIf来查看它是否无效。在这种情况下，您可以使用？运算符。

<div *ngIf="lastName?.invalid || lastName?.dirty" class="error-mesg">
    Field is required
  </div>
</div>

更好的方法是在.ts文件中执行这种类型的逻辑。这使得对代码进行单元测试更加容易。并使用利用该功能的ngIf。但这是我的个人喜好。

模板参考变量在ngFor循环中未定义

1 个答案: