Question

我有一个带有文本框和单选按钮组的表单。我需要对两者都进行验证。对于文本字段来说，它工作得很好

<div class="formControl" [class.error]="carName.touched && carName.errors?.required">
    <div class="formLabel">Name</div>
    <div class="formField">
      <input type="text" required [(ngModel)]="car.name" #carName="ngModel" name="carName">
    </div>
    <div class="message" *ngIf="carName.touched && carName.errors?.required">Required field</div>
</div>

但不适用于重复的单选按钮组

<div class="formControl" [class.error]="make && make.touched && make.errors?.required">
    <div class="formLabel">Make</div>
    <div class="formField">
      <ng-container *ngFor="let year of years">
      <input required type="radio" name="make" [(ngModel)]="car.make" #make="ngModel" [id]="year"
        [value]="year">
        <label [for]="year">{{year}}</label>
      </ng-container>
    </div>
    <div class="message" *ngIf="make && make.touched && make.errors?.required">Required field</div>
</div>

这与在ngFor结构指令中包含元素有关吗？当它失去焦点而没有选择任何值时，这只是不显示错误消息。

Answer 1

使用结构性指令（例如*ngFor），angular为该块内的代码创建自己的模板（ng-template）。

这意味着，模板引用变量make在该代码块之外不可用。但是在这里，如果将其放在*ngFor中，它将被重复显示。我们可以通过在验证中引用基础formcontrol来克服这一问题。在这里，我使用myForm作为表单的名称，您可以提供表单具有的任何名称：

<div *ngIf="myForm.form.hasError('required', 'make')">Required field</div>

DEMO

显示验证消息以模板驱动的形式重复控件

1 个答案: