首页 > 解决方案 > 如何在angular2中使用primeng单击添加按钮时获得空行

问题描述

我有一个带有添加按钮的部分,如果我单击添加按钮,我会得到带有预填充值的字段作为已经存在的字段。我想在单击添加按钮时获得空字段,如果该部分为空,则必须自动出现一个新字段。

HTML:

<div formArrayName="Communicationx" *ngFor="let item of emrPatientdetailsForm.get('Communicationx').controls; let i = index;">

              <div [formGroupName]="i">
                <div class="col-sm-4 pull-left m-b10 m-t10">
                  <label class="col-sm-5 pull-left col-form-label g-color-gray-dark-v2 g-font-weight-700 text-sm-left no-padd">Preferred</label>
                  <!-- <div class="col-sm-7 pull-left no-padd">
                    <div class="input-group g-brd-primary--focus">
                      <input class="form-control form-control-md rounded-0 pr-0" type="text" OnlyNumber="true" maxlength="3" placeholder="Preferred"
                        formControlName="Preferred">
                    </div>
                  </div> -->
                  <div class="col-sm-7 pull-left no-padd">
                      <input type='text' (keyup)="searchDropDown(30, src6.value)" #src6 formControlName="Preferred" [(ngModel)]="selectedPreferred"
                        minlength="3" placeholder="Preferred" />
                      <i class="fa fa-caret-down"></i>
                      <div *ngIf="patientDropdown && patientDropdown?.preferred && IsHidden" class="emr-dropdown">
                        <ul *ngFor="let preferredType of patientDropdown?.preferred" (click)="getValue(preferredType)" class="p-l10 m-b0 brd-b">
                          <li>
                            {{preferredType.Description}}
                          </li>
                        </ul>
                      </div>
                    </div>
                </div>
                <div class="col-sm-4 pull-left m-b10 m-t10">
                  <label class="col-sm-5 pull-left col-form-label g-color-gray-dark-v2 g-font-weight-700 text-sm-left no-padd">Language</label>
                  <!-- <div class="col-sm-7 pull-left no-padd">
                    <div class="input-group g-brd-primary--focus">
                      <input class="form-control form-control-md rounded-0 pr-0" type="text" OnlyNumber="true" maxlength="3" placeholder="Language"
                        formControlName="Language">
                    </div>
                  </div> -->
                  <div class="col-sm-7 pull-left no-padd">
                      <input type='text' (keyup)="searchDropDown(176, src7.value)" #src7 formControlName="Language" [(ngModel)]="selectedLanguage"
                        minlength="3" placeholder="Language" />
                      <i class="fa fa-caret-down"></i>
                      <div *ngIf="patientDropdown && patientDropdown?.language && IsHidden" class="emr-dropdown">
                        <ul *ngFor="let languageType of patientDropdown?.language" (click)="getValue(languageType)" class="p-l10 m-b0 brd-b">
                          <li>
                            {{languageType.Description}}
                          </li>
                        </ul>
                      </div>
                    </div>
                </div>
                <a class="col-sm-2 pull-left m-b10 m-t10" (click)="deleteCommunicationDetails(i)">
                  delete
                </a>
              </div>

            </div>

TS:

 public addCommunicationDetails() {
    this.Communicationx = <FormArray>this.emrPatientdetailsForm.get('Communicationx') as FormArray;
    this.Communicationx.push(this.createCommunicationInformation());

  }

  public deleteCommunicationDetails(i) {
    this.Communicationx = <FormArray>this.emrPatientdetailsForm.controls['Communicationx'];
    this.Communicationx.removeAt(i);
  }

控制台也没有错误。请帮助

标签: angularprimengangular-reactive-forms

解决方案


你能把你的代码放在https://stackblitz.com上吗?这不是很清楚,我不明白你期待什么结果


推荐阅读