时间戳

首页 > 解决方案 > 如何根据角度下拉列表中的多个选定值动态添加输入字段

angular - 如何根据角度下拉列表中的多个选定值动态添加输入字段

问题描述

我正在尝试添加基于多个选定下拉值的输入字段，应根据选择显示相应的输入字段。

即，如果我从下拉字段中添加父亲和母亲，则应显示相应的父亲年龄输入字段和母亲年龄输入字段。

 **<div class="col-2">
                      <label for="members">Members to be Incured</label>
                  </div>
                  <div class="col-4">
                        <ngx-select-dropdown #t [config]="config" [options]="dropdownOptions" (change)="checkFamily($event)" formCoxntrolName="membersIncur" 
                        [multiple]="true" ></ngx-select-dropdown>
                  </div>
                </div>
                <div class="form-row">
                  <div class="col-2">
                      <label for="age">Your Age<span class="mandatory">*</span></label>
                  </div>
                  <div class="col-2">
                      <input type="number" formControlName="age"> 
                      <div *ngIf="submitted && cf.age.errors">
                            <div class="text-danger" *ngIf="cf.age.errors.required">
                             Age is required
                            </div>
                          </div>
                  </div>



                </div>
                <div class="form-row">

                  <div class="col-2">
                        <label for="age">Father Age<span class="mandatory">*</span></label>
                    </div>
                    <div class="col-2">
                        <input type="number" formControlName="fatherAge">
                        <div *ngIf="submitted && cf.fatherAge.errors">
                                <div class="text-danger" *ngIf="cf.fatherAge.errors.required">
                                Father Age is required
                                </div>
                              </div>
                    </div>

                </div>
                <div class="form-row">
                        <div class="col-2" >
                              <label for="age">Mother Age<span class="mandatory">*</span></label>
                          </div>
                          <div class="col-2" >
                              <input type="number" formControlName="motherAge">
                              <div *ngIf="submitted && cf.motherAge.errors">
                                    <div class="text-danger" *ngIf="cf.motherAge.errors.required">
                                     Mother Age is required
                                    </div>
                                  </div>
                          </div>
                      </div>**

标签： angular

解决方案

Try with ngIf, you can add or remove the div node based on the value of dropdown, you can check if value in membersIncur is father or not, something like this:-

 <div *ngIf="cf.membersIncur.value=='fathersVal'" class="form-row"><!--validate the value of dropdown here-->
              <div class="col-2">
                <label for="age">Father Age<span class="mandatory">*</span></label>
              </div>
              <div class="col-2">
                <input type="number" formControlName="fatherAge">
                <div *ngIf="submitted && cf.fatherAge.errors">
                  <div class="text-danger" *ngIf="cf.fatherAge.errors.required">
                    Father Age is required
                  </div>
                </div>
              </div>

            </div>

推荐阅读