Как получить пустую строку при нажатии кнопки добавления, используя primeng in angular2

Question

У меня есть раздел с кнопкой добавления, если я нажимаю кнопку добавления, я получаю поля с предварительно заполненными значениями, как уже существующее.Я хочу получить пустые поля при нажатии кнопки добавления, и если раздел пуст, то автоматически должно появиться одно новое поле.

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);
  }

В консоли также нет ошибок.Пожалуйста, помогите

Answer 1

Вы хотите что-то вроде этого, я считаю.

addCommunicationDetailsRow() {
   // shallow copy of selected or empty
  const newRowModel = {...this.selected} || {};
  this.communicationx.push(newRowModel);
  this.selected = newRowModel;
}

}

Тогда в вашем шаблоне

<button (click)="addCommunicationDetailsRow()">Add</button>

<section *ngFor="let item of items">
   <div [formGroupName]="i" (click)="selected = item">
</section>

Answer 2

Не могли бы вы поставить свой код на https://stackblitz.com?Это не очень понятно, и я не понимаю, какого результата вы ожидаете