Skip to main content
edited body
Source Link
marc_s
  • 759.6k
  • 185
  • 1.4k
  • 1.5k

I have a FormGroup with a template-driven validation. I need my formularform to have a section of dynamically generated inputs, created by ngFor. Unfortunately, angular2 now requires every input within FormGroup using ngModel to be named. How can I deal with it? Template-driven solution is prefferedpreferred. 

Form code is as follows:

I have a FormGroup with a template-driven validation. I need my formular to have a section of dynamically generated inputs, created by ngFor. Unfortunately, angular2 now requires every input within FormGroup using ngModel to be named. How can I deal with it? Template-driven solution is preffered. Form code is as follows:

I have a FormGroup with a template-driven validation. I need my form to have a section of dynamically generated inputs, created by ngFor. Unfortunately, angular2 now requires every input within FormGroup using ngModel to be named. How can I deal with it? Template-driven solution is preferred. 

Form code is as follows:

Source Link
doomista
  • 541
  • 2
  • 15

Validation of dynamic angular2 forms

I have a FormGroup with a template-driven validation. I need my formular to have a section of dynamically generated inputs, created by ngFor. Unfortunately, angular2 now requires every input within FormGroup using ngModel to be named. How can I deal with it? Template-driven solution is preffered. Form code is as follows:

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

Thanks in advance for help