Question

我正在使用ng-select library使用角度动态形式进行角度应用。

带有选择的 HTML ：

    <div *ngFor="let question of questions" class="form-row {{question.class}}">
            <ng-container *ngIf="question.children">
                <div [formArrayName]="question.key" class="w-100">
                    <div *ngFor="let item of form.get(question.key).controls; let i=index" [formGroupName]="i" class="row mt-1">
                        <div *ngFor="let item of question.children" class="{{item.class}} align-middle">
                            <div class="w-100">
                                <dynamic-form-builder [question]="item" [index]="i" [form]="form.get(question.key).at(i)"></dynamic-form-builder>
                            </div>
                        </div>
                    </div>
                    <div class="container">
                        <div class="row">
                            <div class="col-6 col-sm-12 col-lg-6 col-md-6">
                                <div class="form-label-group" *ngIf="showTemplateDropdown">
                                    <ngi-select placeholder="Select Template" [required]="true" [hideSelected]="false" [multiple]="true" [items]="templateList"
                                     dropdownPosition="down" bindLabel="name" bindValue="id" (add)="getTemplateValues($event)" (remove)="onRemove($event)">
                                    </ngi-select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="container">
                        <div class="row">
                            <div class="col-6 col-sm-12 col-lg-6 col-md-6">

                            </div>
                            <div class="col-6 col-sm-12 col-lg-6 col-md-6 text-right">
                                <div class="btn-group  float-right">
                                    <button class="btn btn-primary btn-round btn-fab mat-raised-button" mat-min-fab="" mat-raised-button="" type="button"
                                     (click)="addControls('template_properties')">
                                        <span class="mat-button-wrapper"><i class="material-icons mt-2">add</i></span>
                                        <div class="mat-button-ripple mat-ripple" matripple=""></div>
                                        <div class="mat-button-focus-overlay"></div>
                                    </button> &nbsp;&nbsp;&nbsp;
                                    <button class="btn btn-primary btn-round btn-fab mat-raised-button" mat-min-fab="" mat-raised-button="" type="button"
                                     (click)="removeControls('template_properties')">
                                        <span class="mat-button-wrapper"><i class="material-icons mt-2">remove</i></span>
                                        <div class="mat-button-ripple mat-ripple" matripple=""></div>
                                        <div class="mat-button-focus-overlay"></div>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </ng-container>
            <ng-container *ngIf="!question.children">
                <div class="w-100">
                    <dynamic-form-builder [question]="question" [form]="form"></dynamic-form-builder>
                </div>
            </ng-container>
        </div>

[items]="templateList"具有以下内容，

[{"id":"5bebba2c20ccc52871509d56","name":"Template One"},
{"id":"5bebba5720ccc52871509d57","name":"Template Two"},
{"id":"5bebba8d20ccc52871509d5d","name":"Template Three"}]

当我们从下拉列表中选择一项时，我正在遇到(change)="getTemplateValues($event)"事件，用于检测每个更改。

更改事件功能已编辑，

    getTemplateValues(e) {
      this.dynamicFormService.getRest("url" + '/' + e.id").subscribe(res => {
  try {
    if (res.status === "true") {
      res.data.template_properties.forEach(element => {
        this.templateArray.push(element);
      });
      this.form = this.qcs.toFormGroup(this.questions);
      for (let i = 0; i < this.templateArray.length; i++) {
        this.addControls('template_properties');
      }
      let propertiesArray = [];
      this.templateArray.forEach(element => {
        propertiesArray.push(element);
      });
      this.form.patchValue({
        'template_properties': propertiesArray
      });
    } else {

    }
  }
  catch (error) {

  }
})

}

console.log(this.propertiesArray)提供以下信息，

[{"property_name":"Property one","property_type":4,"property_required":true,"property_origin":1},{"property_name":"Property one","property_type":5,"property_required":true,"property_origin":1}]

在下图中，我删除了模板3，但是模板3属性仍显示在其中。

在这里，我首先过滤数据并忽略重复项，并且每次我将新选择的值单独发送到服务并提取与ID element.id相关的数据时。

并使用this.addControls('template_properties')来打开行数，元素将被修补为template_properties形式。

this.form.patchValue({
 'template_properties': propertiesArray
});

到目前为止，一切正常。.

问题实际上是从这里产生的：

如果我们从下拉列表中删除选定的列表，（例如，我已经选择了所有三个模板，并且我已删除了template two，则该特定template的{{1 }}需要删除。.

我对template_properties进行过尝试，但由于在删除数据时(remove)="onRemove($event)"函数也会调用而无法正常工作。

如何在更改事件或删除事件中删除带有特定模板名称(change)的{{1}}。

删除功能：

template_properties

删除控制权：

this.removeControls('template_properties');

onRemove(e) { console.log(e); this.dynamicFormService.getRest("url" + '/' + e.value.id").subscribe(res => { try { if (res.status === "true") { for (let i = 0; i < res.data.template_properties.length; i++) { this.removeControls('template_properties'); } } else { } } catch (error) { } }) }给出

Answer 1

应该很容易解决。使用(add)代替(change)中的ngi-select。

 onRemove(e) {
    console.log(e);
    this.dynamicFormService.getRest("url" + '/' + e.value.id").subscribe(res => {
      try {
        if (res.status === "true") {
          this.form = this.qcs.toFormGroup(this.questions);

          // Issue is here, you should remove only specific record
          // which is being passed from function `e`
          for (let i = 0; i < res.data.template_properties.length; i++) {
            this.removeControls('template_properties'); 
          }

          let propertiesArray = [];
          this.templateArray.forEach(element => {
            propertiesArray.push(element);
          });
          this.form.patchValue({
            'template_properties': propertiesArray
          });
        } else {

        }
      }
      catch (error) {

      }
    })
  }

在您要从中删除元素的removeControls中传递索引。

  removeControls(control: string, index:number) {
    let array = this.form.get(control) as FormArray;
    console.log(array)
    array.removeAt(index);
  }

console.log(array)给出

删除父母时如何删除孩子？

1 个答案: