如何在angular2中使用priming在单击添加按钮时获得空行

时间:2018-09-20 11:53:31

标签: angular primeng angular-reactive-forms

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

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

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

2 个答案:

答案 0 :(得分:0)

您可以将代码放在https://stackblitz.com上吗?还不太清楚,我不明白您期望得到什么结果

答案 1 :(得分:0)

我想你想要这样的东西。

GET http://localhost:3000/api/request 404 (Not Found)

}

然后在您的模板中

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