根据下拉列表中的选定值显示表单字段Angular TypeScript

Posted

技术标签:

【中文标题】根据下拉列表中的选定值显示表单字段Angular TypeScript【英文标题】:Display a form field according to the selected value in a drop-down list Angular TypeScript 【发布时间】:2019-04-17 14:03:30 【问题描述】:

我想根据表单下拉列表中选择的值显示一个表单域。

例如,如果在下拉列表中选择的元素是“第一个”,我希望表单不会改变。

另一方面,如果我在下拉列表中选择元素“二”,我希望它显示输入“出现”

这是我目前的代码

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>

打字稿:

   ...
private selectedOption: string;

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

提前感谢您的帮助。

美好的一天,

问候, 瓦伦丁

【问题讨论】:

【参考方案1】:

您可以将if 条件设置为 -

<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>

工作副本在这里 - https://stackblitz.com/edit/angular-fqkfyx

注意:看起来您对 Angular 很陌生,我鼓励您阅读 Angular 教程。 *** 从长远来看不会有帮助。

【讨论】:

非常感谢您的回答!我不知道 ngIf,它确实与我的问题完全对应。我遵循一个教程角度,但我还没有看到所有的参数。但是你的代码我是公平的,但它没有运行。出现不出现。如果你有想法......我会继续我的研究:) 您在option 中忘记了[value]。请参阅我的更新答案。 谢谢您,我刚刚看到您的更改,但它不起作用。我认为他无法恢复下拉列表的值。我继续使用 console.log 和 alert 进行研究。解决后,我把答案和你的帖子解决了 我的错。它应该是[value]="o.name" 谢谢,我刚改了,还是不行^^【参考方案2】:

您可以在 html 中使用 angular if contdition,它被称为 *ngIf。

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

来源:https://angular.io/api/common/NgIf

【讨论】:

您好,感谢您的回复!实际上,在我看来,就像上面的代码一样,但是当我选择“两个”时它没有运行出现没有出现。我认为他无法恢复下拉列表的值。我继续我的研究谢谢:)

以上是关于根据下拉列表中的选定值显示表单字段Angular TypeScript的主要内容,如果未能解决你的问题,请参考以下文章

如何根据下拉列表中的选定数字生成表单输入字段(选择)

css 根据选定的下拉列表显示输入字段并根据显示的输入内容更改隐藏的输入值(如果为空且如果不为空

下拉以根据单个组件中另一个下拉列表中的选定值刷新值

Angular 2 - 如何使用下拉列表的值生成表单?

根据另一个字段中的选择显示/隐藏 django 管理表单字段

Angular 2 模型驱动形式的下拉列表