Question

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

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

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

Answer 1

您可以使用在更改事件中创建的功能来做到这一点：

checkFamily(evt: any) {
// here evt will be the array of the selected options with complete json format
// you can check for changes here itself
}

有关更多信息，请访问： here 要么 this link

Answer 2

尝试使用ngIf，您可以根据下拉列表的值添加或删除div节点，可以检查membersIncur中的值是否为父级，如下所示：-

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

如何基于角度下拉菜单中的多个选定值动态添加输入字段

2 个答案: