Angular: Enable form input for only certain sections of html form

Question

I setting up a form in html to allow users to edit individual profiles if the check box is checks. So far, I'm using a ngFor loop to populate the page with data. The issue is that if I press the checkbox, every item in the returned data becomes editable.

The html looks like this:

<ul class="profiles">
    <li *ngFor="let profile of profiles">
            <ngb-panel title="Profile ID: {{profile.id}}">
                <ng-template ngbPanelContent>
                    <label>Check here to edit:
                        <input type="checkbox" [(ngModel)]="checked">
                        <form>
                            <fieldset [disabled]="!checked">
                                <input
                                    type="text"
                                    [(ngModel)]="profile.profileName"
                                    name="profileName"
                                >
                            </fieldset>
                        </form>
                </ng-template>
            </ngb-panel>
    </li>
</ul>

Technically speaking, this does work; once the checkbox is checked, the input below is enabled. The issue here is that, because I'm using an ngFor loop to populate the html with the profile information, checking one checkbox enables ALL the profile sections. What I need to do is set this up so that each profile section will only be enabled if its individual edit checkbox is checked off. Are there any good ways to set this up, while still allowing the for loop?

Hatchet · Accepted Answer · 2018-08-06 18:24:30Z

2

The checked variable in your example does not appear to be profile-specific (I would need to see your JS code to be 100% sure, but that's what it looks like) so you'll need to make a checked property that corresponds to each profile, either as a property of a profile object, or in some other fashion.

<fieldset [disabled]="!checked"> <-- this is going to be the same for all profiles
    <input type="text" [(ngModel)]="profile.profileName" name="profileName">
</fieldset>

answered Aug 6, 2018 at 18:24

Hatchet

5,4161 gold badge35 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ashish Ranjan · Accepted Answer · 2018-08-06 18:42:18Z

In your ts, create a temporary array of Profiles which holds a key for checked for each Profile. That way each profile can be checked/unchecked.

let tempProfiles = profiles.map((elem) => {
    let tempElem = {...elem}   // don't want to modify the original Objects
    tempElem['checked'] = false
    return tempElem
})

then loop with tempProfiles in HTML

<ul class="profiles">
<li *ngFor="let profile of tempProfiles">
        <ngb-panel title="Profile ID: {{profile.id}}">
            <ng-template ngbPanelContent>
                <label>Check here to edit:
                    <input type="checkbox" [(ngModel)]="profile.checked">
                    <form>
                        <fieldset [disabled]="!profile.checked">
                            <input
                                type="text"
                                [(ngModel)]="profile.profileName"
                                name="profileName"
                            >
                        </fieldset>
                    </form>
            </ng-template>
        </ngb-panel>
</li>

Collectives™ on Stack Overflow

Angular: Enable form input for only certain sections of html form

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related