代码之家 › 专栏 › 技术社区 › Abdul Rafay

角度5-使用模板驱动表单的动态表单验证

validation typescript forms angular

Abdul Rafay · 技术社区 · 8 年前

我正在使用动态创建表单域 ngFor 每个领域都是独一无二的 name 小精灵。我正在努力验证它们。我的示例代码:

<div *ngFor="let dimension of lstShippingDimensions; let i = index" class="dimension-item">
        <input type="text" name="units-{{i}}" [(ngModel)]="dimension.units" 
        class="first-f" placeholder="# of units" required>
        <input type="text" name="width-{{i}}" [(ngModel)]="dimension.width" 
        class="second-f" placeholder="W" required>
        <input type="text" name="height-{{i}}" [(ngModel)]="dimension.height" 
        class="third-f" placeholder="H" required>
        <input type="text" name="length-{{i}}" [(ngModel)]="dimension.length" 
        class="forth-f" placeholder="L" required>
        <select class="five-f" name="unitType-{{i}}" [(ngModel)]="dimension.unitType" 
        required>
            <option>inches</option>
            <option>feet</option>
        </select>
        <div *ngIf="!units-{{i}}.valid && units-{{i}}.touched" class="text-danger text-left">
            <small *ngIf="units-{{i}}.errors.required">Field is required.</small>
        </div>
    </div>

2 回复 | 直到 8 年前

Abdul Rafay 8 年前

通过添加 #units="ngModel" . 我猜角处理参考 ngFor 本身。这很好用:

<div *ngFor="let dimension of lstShippingDimensions; let i = index" class="dimension-item">
    <input type="text" name="units-{{i}}" #units="ngModel" [(ngModel)]="dimension.units" class="first-f" placeholder="# of units" required>
    <input type="text" name="width-{{i}}" [(ngModel)]="dimension.width" class="second-f" placeholder="W" required>
    <input type="text" name="height-{{i}}" [(ngModel)]="dimension.height" class="third-f" placeholder="H" required>
    <input type="text" name="length-{{i}}" [(ngModel)]="dimension.length" class="forth-f" placeholder="L" required>
    <select class="five-f" name="unitType-{{i}}" [(ngModel)]="dimension.unitType" required>
        <option>inches</option>
        <option>feet</option>
    </select>
    <div *ngIf="!units.valid && units.touched" class="text-danger text-left">
        <small># of units is required.</small>
    </div>
</div>

Tomas 8 年前

您的示例是反应式表单处理的用例示例。请考虑使用表单数组和表单组:

<form formArrayName="formArray">
<div *ngFor="let dimension of lstShippingDimensions; let i = index" class="dimension-item" [formGroupName]="i">

        <input type="text" name="units-{{i}}" [formControlName]="'units'"
        class="first-f" placeholder="# of units" required>
        <input type="text" name="width-{{i}}" [formControlName]="'width'" 
        class="second-f" placeholder="W" required>
        <input type="text" name="height-{{i}}" [formControlName]="'height'" 
        class="third-f" placeholder="H" required>
        <input type="text" name="length-{{i}}" [formControlName]="'length'" 
        class="forth-f" placeholder="L" required>
        <select class="five-f" name="unitType-{{i}}" [formControlName]="'unitType'" 
        required>
            <option>inches</option>
            <option>feet</option>
        </select>
        <div class="text-danger text-left">
            <small *ngIf="formArrayName[i].errors.required">Field is required</small>
        </div>
    </div>
</form>

最初的解决方案不起作用,因为 !units-{{i}}.valid && units-{{i}}.touched" 未按预期导出到模板。如果您将其声明为模板变量,它可能会工作:

    <input type="text" name="height-{{i}}" [(ngModel)]="dimension.height" 
    class="third-f" placeholder="H" required #templateVar="ngForm">
   <div *ngIf="templateVar.valid && templateVar.touched" class="text-danger text-left">
        <small *ngIf="templateVar.errors.required">Field is required.</small>
    </div>

但不能动态创建模板变量名,即 #DynamicVar-{{i}} 不允许。