Need to display 2 input text after selecting a specific value in drop down in angular 4

Question

I have a specific requirement. I need to display 2 input text fields after selecting a specific value from a drop down which is 'Add New...' My code snippet is below -

    <td>
    <div *ngIf="item.showOperationField">
        <p-checkbox
            value ="inflationaryImpactCheck"
            label="Save for Inflationary Impact"
            name = "calculationSaveInflation"
            [(ngModel)]="item.inflationaryImpact"
            pTooltip="Check the Inflationary Impact box to map this calculation to an index for Inflationary Pressure calculation."
            binary="true">
        </p-checkbox>
    </div>
    </td>
    <td>
    <div *ngIf="item.inflationaryImpact">
        <p-dropdown
            [style]="{'width':'200px'}"
            [options]="inflation"
            name = "calculationInflation"
            [(ngModel)]="item.selectedInflation">
        </p-dropdown>
    </div>
    </td>
<td>
<div *ngIf="item.selectedInflation=='Add New...'">
   <input
    [style]="{'width':'200px'}"
    type="text"
    name="catValue"
    pInputText
    [(ngModel)]="item.catValue"
    />
</div>
</td>

Now I need to display 2 input boxes while selecting a specific value from the drop down "inflation" which is 'Add New...'. I have tried with the above code snippet but nothing happened. Please help me.

Sachila Ranawaka · Answer 1 · 2017-11-17T08:20:08.317

0

Just use the ngIf condition

<td>
<div *ngIf="item.inflationaryImpact">
    <p-dropdown
        [style]="{'width':'200px'}"
        [options]="inflation"
        name = "calculationInflation"
        [(ngModel)]="item.selectedInflation">
    </p-dropdown>
</div>
</td>
<td *ngIf="item.selectedInflation === 'Add New...'">
<div>
    <input type="text" name="txt 1"/>
    <input type="text" name="txt 2"/>
</div>
</td>

edited Nov 17 '17 at 08:20

answered Nov 17 '17 at 08:07

Sachila Ranawaka

39,756
7
56
80

Sanchila, I have edited my post. Please see. I forgogt add a particular code snippet which I modified now. Somehow it seems so simple but not wokking.. – Sandipan Sarkar Nov 17 '17 at 08:18
can you create a plnkr – Sachila Ranawaka Nov 17 '17 at 09:18

score 0 · Answer 2 · answered Nov 17 '17 at 08:24

0

Hope you have not changed the change detection, and left it as default. If change detection is On-push, then trigger change detection manually.

answered Nov 17 '17 at 08:24

Kannan M

570
2
6
19

I did not get you – Sandipan Sarkar Nov 17 '17 at 08:26
`@Component({ selector: '**', templateUrl: './**.component.html', styleUrls: ['./**.component.css'], changeDetection: ChangeDetectionStrategy.OnPush })` Have you changed ur changed detection strategy like this or the default one? – Kannan M Nov 17 '17 at 08:29
or if ngIf is not working , try [class.hidden]="!(item.selectedInflation === 'Add New...')" – Kannan M Nov 17 '17 at 08:46

Alber · Answer 3 · 2017-11-17T09:54:41.220

You should use a FormGroup or FormArray(better way but for your code maybe FormGroup is better) in the component class and when 'Add new' is selected trigger a funtion that add a new FormControl to the FormGroup or FormArray, then use *ngFor in the html template.

<div *ngIf="item.selectedInflation==='Add New...'">
<div [formGroupName]="FormGroup" *ngFor="let entry of FormGroup.controls; let i=index" >
   <input
    [style]="{'width':'200px'}"
    type="text"
    name="catValue"
    pInputText
    [(ngModel)]="item.catValue"
    />
</div>
</div>
</td>

This work for adding a new input everythime 'Add new' is selected, but if you want to show only one input then the *ngIf should work, if not check [(ngModel)] maybe the problem is there or maybe the string in item.selectedInflation is not equal to 'Add New...'. Anyway post more code for a better answer.

 <div *ngIf="item.selectedInflation==='Add New...'">

Need to display 2 input text after selecting a specific value in drop down in angular 4

3 Answers3