How do I access a variable inside a ng-container with an ng-for for my ngif?

Question

I am using a template-driven form. I have an ng-container with an ng-for that create radio buttons. As part of my validation, I have a variable name that checks for errors.

Below is a snippet of my code:

    <div class="col-md-4">
        <ng-container *ngFor="let item of assetFormatOptions | wfsort">
            <ng-container *ngIf="!item['isHidden']">
                <div class="form-group form-group--inline">
                    <label class="radio">


<!--Created variable called assetFormat for validation purposes-->
                        <input type="radio" #assetFormat="ngModel" name="DE:Asset Format" value="{{item.value}}" ngModel required>
                        <span class="radio__input"></span>
                        <span class="radio__label hidden-xs">{{item.label}}</span>
                    </label>
                </div>
            </ng-container>
        </ng-container>


<!--trying to access variable above-->
        <div *ngIf="submitted && assetFormat.errors && (assetFormat.touched || submitted && !assetFormat.valid)" class="alert alert--danger">
            <span class="error">This field is required.  
                <span class="icon-chevron-up"></span>
           </span>
        </div>
    </div>

This goal is for the ngIf at the bottom to read the status of the radio buttons. In this case, there would be 3 or 4 different radio buttons.

As of right now, the ngIf is not able to read the radio button variables. How do I get the radio button variable to my ngIf? I don't want the ngIf inside my for loop.

Possible duplicate of [Bind to Template Reference Variable inside angular](https://stackoverflow.com/questions/52501396/bind-to-template-reference-variable-inside-ng-container-angular) — Sev, Jun 13 '19 at 17:55
See this: https://stackoverflow.com/questions/52501396/bind-to-template-reference-variable-inside-ng-container-angular — Sev, Jun 13 '19 at 17:55
Thank you for showing me this, but based on what I'm seeing, I don't' see that it is a duplicate. The example shared is a different function vs form validation. — Mike Holman, Jun 13 '19 at 18:12
Not possible with your current implementation. You will need to refactor your code/template to use a `FormArray` instance in order to archive what you want. — Jota.Toledo, Jun 19 '19 at 18:49

indrajeet · Answer 1 · 2019-06-19T19:33:38.830

Pass your variable as context to template. try this

<div class="col-md-4">
        <ng-container *ngFor="let item of assetFormatOptions | wfsort">
           <ng-container *ngTemplateOutlet="itemContainer; context:{item:item}"></ng-container>
        </ng-container>


<!--trying to access variable above-->
        <div *ngIf="submitted && assetFormat.errors && (assetFormat.touched || submitted && !assetFormat.valid)" class="alert alert--danger">
            <span class="error">This field is required.  
                <span class="icon-chevron-up"></span>
           </span>
        </div>
    </div>

 <ng-template #itemContainer let-item="item" *ngIf="!item['isHidden']">
                <div class="form-group form-group--inline">
                    <label class="radio">


<!--Created variable called assetFormat for validation purposes-->
                        <input type="radio" #assetFormat="ngModel" name="DE:Asset Format" value="{{item.value}}" ngModel required>
                        <span class="radio__input"></span>
                        <span class="radio__label hidden-xs">{{item.label}}</span>
                    </label>
                </div>
            </ng-template>

How do I access a variable inside a ng-container with an ng-for for my ngif?

1 Answers1