Проверка динамических форм angular2

У меня есть FormGroup с проверкой на основе шаблонов. Мне нужна моя форма, чтобы иметь раздел динамически генерируемых входных данных, созданных ngFor. К сожалению, angular2 теперь требует, чтобы каждый ввод в FormGroup с использованием ngModel был назван. Как я могу с этим справиться? Предпочтительно решение на основе шаблонов.

Код формы следующий:

<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>

Заранее спасибо за помощь


angular angular2-forms angular2-template
person doomista    schedule 25.08.2017    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Я предполагаю, что вы ищете это: 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>
....
person Vega    schedule 25.08.2017
comment
Не работает. Все, что находится между двойными кавычками, рассматривается как открытый текст. - person doomista; 25.08.2017