How to place condition while, looping form array in html

Question

I have a formarray in the form, Need to hide and show based on dropdown value - is_dependent_exist

I have tried like below:

var all_user_custom_fields = [
  {
    'field_name_slug': 'radio_button_with_group_custom_field8',
    'is_dependent_exist': 0
  },
  {
    'field_name_slug': 'radio_button_with_default_value',
    'is_dependent_exist': 1
  },
  {
    'field_name_slug': 'radio_button_with_mandatory',
    'is_dependent_exist': 1
  },
  {
    'field_name_slug': 'check_box_with_mandatory',
    'is_dependent_exist': 0
  }
];
<div  *ngFor="let CustomUser of custom_field_dataArray.controls; index as c;" [formGroupName]="c" class="col-12 md:col-6 lg:col-4  
*ngIf="all_user_custom_fields[c]?.is_dependent_exist != 1">
<input formControlName="{{all_user_custom_fields[c]?.field_name_slug}}" type="text" (keyup)="validate($event, c, all_user_custom_fields[c]?.field_name_slug)" pInputText />
</div>

Getting issue like Property 'c' does not exist on type 'UsersComponent'.

I need to display only is_dependent_exist = 0 value fields

Thank you Ghaith Arfaoui, But it's not working for me, Again getting Property 'c' does not exist on type — Anil Kumar Boddu
– Anil Kumar Boddu, Commented Jan 22, 2024 at 15:00

Scryper · Accepted Answer · 2024-01-22 15:34:48Z

0

You can't use 2 directives (*ngFor and *ngIf) on the same element.

This should work :

<div *ngFor="let CustomUser of custom_field_dataArray.controls; index as c;" [formGroupName]="c" class="col-12 md:col-6 lg:col-4">
    <div *ngIf="all_user_custom_fields[c]?.is_dependent_exist != 1">
        <input formControlName="{{all_user_custom_fields[c]?.field_name_slug}}" type="text" (keyup)="validate($event, c, all_user_custom_fields[c]?.field_name_slug)" pInputText />
    </div>
</div>

answered Jan 22, 2024 at 15:34

Scryper

3413 silver badges17 bronze badges

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

2 Comments

Eliseo Over a year ago

if you don't want create extra "tag" replace one of the divs by ng-content

WhatsThePoint Over a year ago

a note to OP, if you do go down this route, you can stick an else in the if statement to display some other content like this stackoverflow.com/q/43006550/7147233

Collectives™ on Stack Overflow

How to place condition while, looping form array in html

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related