如何使用ng-for ngif来访问ng-container中的变量？

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.

Answer 1

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>