动态 angular2 形式的验证

Question

我有一个带有模板驱动验证的 FormGroup。我需要我的表单有一段由 ngFor 创建的动态生成的输入。不幸的是，angular2 现在要求使用 ngModel 命名 FormGroup 中的每个输入。我该如何处理？首选模板驱动的解决方案。

表单代码如下：

<form #f="ngForm" (ngSubmit)="createProfile()">
    <div class="row align-items-center mb-2">
        <div class="col-sm-2">
            <b>Name:</b>
        </div>
        <div class="col-sm-10">
            <input type="text" [(ngModel)]="profile.name" class="form-control"
            name="profileName" required pattern="[a-zA-Z_][a-zA-Z_\-0-9]*">
        </div>
    </div>

    <div class="channelBox">
        <div *ngFor="let c of profile.channels">
            <div class="row align-items-center mb-2">
                <div class="col-sm-2">
                    <b>Name:</b>
                </div>
                <div class="col-sm-10">
                    <input type="text" [(ngModel)]="c.name" class="form-control" required
                    pattern="[a-zA-Z_][a-zA-Z_\-0-9]*" name="channelName">
                </div>
            </div>

            <div class="row align-items-center mb-2">
                <div class="col-sm-2">
                    <b>Filter:</b>
                </div>
                <div class="col-sm-10">
                    <textarea class="form-control" rows="4" [(ngModel)]="c.filter"
                    name="channelFilter">
                    </textarea>
                </div>
            </div>

            <div class="row align-items-center mb-2">
                <div class="col-sm-2">
                    <b>Sources:</b>
                </div>
                <div class="col-sm-10">
                    <label *ngFor="let s of c.sources">
                        <input type="checkbox" [(ngModel)]="s.checked" 
                        name="channelCheck">
                        {{ s.name }}
                    </label>
                </div>
            </div>
        </div>
    </div>

    <div>
        <button class="btn btn-success" type="submit" [disabled]="!f.valid">
            Create profile
        </button>
        <button class="btn btn-default" (click)="d('reason')">Cancel</button>
    </div>
</form>

在此先感谢您的帮助

Answer 1

我猜您正在寻找这个：name="{{'someName'+i}}"。它将缩进循环索引和一些名称，最好是有意义的。

您也可以使用 [name]="'someName' + i" 语法。

<div *ngFor="let c of profile.channels; let i=index">
            <div class="row align-items-center mb-2">
                <div class="col-sm-2">
                    <b>Name:</b>
                </div>
                <div class="col-sm-10">
                    <input type="text" [(ngModel)]="c.name" class="form-control" required 
                     name="{{'someName'+i}}"
                    pattern="[a-zA-Z_][a-zA-Z_\-0-9]*" name="channelName">
                </div>
            </div>
....

动态 angular2 形式的验证

Validation of dynamic angular2 forms

angular2-forms

angular2-template

angular