admin管理员组

文章数量:1394203

I want to display a form field according to the selected value in a drop-down list of the form.

For example if the element selected in the dropdown list is 'first' I want the form does not change.

On the other hand if I choose the element 'two' in my drop-down list I want it to display the input 'appears'

Here is my code for the moment

HTML:

<div class="div-champs">
    <p id="champs">Type
       <span id="required">*</span>
    </p>
    <div class="select-style ">
        <select [(ngModel)]="selectedOption" name="type" > 
           <option style="display:none">
           <option *ngFor="let o of options">
              {{o.name}}
           </option>
       </select>
    </div>
</div>

<p id="champs">Appears
    <input type="appears" class="form-control" name="appears" formControlName="appears">
</p>

TypeScript:

   ...
private selectedOption: string;

options = [
  { name: "first", value: 1 },
  { name: "two", value: 2 }
]
  ...

Thank you in advance for your help.

Beautiful day,

Regards, Valentin

I want to display a form field according to the selected value in a drop-down list of the form.

For example if the element selected in the dropdown list is 'first' I want the form does not change.

On the other hand if I choose the element 'two' in my drop-down list I want it to display the input 'appears'

Here is my code for the moment

HTML:

<div class="div-champs">
    <p id="champs">Type
       <span id="required">*</span>
    </p>
    <div class="select-style ">
        <select [(ngModel)]="selectedOption" name="type" > 
           <option style="display:none">
           <option *ngFor="let o of options">
              {{o.name}}
           </option>
       </select>
    </div>
</div>

<p id="champs">Appears
    <input type="appears" class="form-control" name="appears" formControlName="appears">
</p>

TypeScript:

   ...
private selectedOption: string;

options = [
  { name: "first", value: 1 },
  { name: "two", value: 2 }
]
  ...

Thank you in advance for your help.

Beautiful day,

Regards, Valentin

  • javascript
  • html
  • angular
  • forms
  • typescript
Share Improve this question edited Nov 14, 2018 at 15:00 Valentin asked Nov 14, 2018 at 14:55 ValentinValentin 4232 gold badges6 silver badges17 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 3

You can put if condition as -

<p id="champs" *ngIf="selectedOption == 'two'">Appears
    <input type="appears" class="form-control" name="appears" formControlName="appears">
</p>

html

      <select [(ngModel)]="selectedOption" name="type" > 
           <option style="display:none">
           <option [value]="o.name" *ngFor="let o of options">
              {{o.name}}
           </option>
       </select>

Working copy is here - https://stackblitz./edit/angular-fqkfyx

Note : It looks like you pretty new to the Angular, I would encourage to walk through Angular tutorial. Stackoverflow will not be helpful in long run.

You can use an angular if contidition in the html, it's called *ngIf.

<input *ngIf="selectedOption == 'two'" type="appears" class="form-control" name="appears" formControlName="appears">

Source: https://angular.io/api/mon/NgIf

本文标签：

版权声明：本文标题：javascript - Display a form field according to the selected value in a drop-down list Angular TypeScript - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744730622a2622026.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。