Question

我正在用角形进行角形应用。

在这里，我给了一个带有输入字段first name and last name的表格，该表格将始终显示。.

此后，我有了孩子，单击添加按钮时将显示这些孩子，单击删除按钮将删除孩子。

到目前为止，一切正常。

在这里，我正在将数据修补到选择框中的单击选项上的输入。.必要的输入被修补了。.

HTML：

<div>
    <form (ngSubmit)="onSubmit()" [formGroup]="form">

        <div *ngFor="let question of questions" class="form-row">
            <ng-container *ngIf="question.children">
                <div [formArrayName]="question.key">
                    <div *ngFor="let item of form.get(question.key).controls; let i=index" [formGroupName]="i">
                        <div *ngFor="let item of question.children">
                            <app-question [question]="item" [form]="form.get(question.key).at(i)"></app-question>
                        </div>
                    </div>
              <select multiple (change)="changeEvent($event)">
      <option *ngFor="let opt of persons" [value]="opt.key">{{opt.value}}</option>
    </select>
                </div>
            </ng-container>
            <ng-container *ngIf="!question.children">
                <app-question [question]="question" [form]="form"></app-question>
            </ng-container>
        </div>

        <div class="form-row">
            <!-- <button type="submit" [disabled]="!form.valid">Save</button> -->
    </div>
  </form> <br>

  <!-- Need to have add and remove button.. <br><br> -->

  <button (click)="addControls('myArray')"> Add </button>
  <button (click)="removeControls('myArray')"> Remove </button><br/><br/>
  <pre>
{{form?.value|json}}
</pre>
</div>

TS：

 changeEvent(e) {
    if (e.target.value == 1) {
      let personOneChild = [
        { property_name : "Property one" },
        { property_name : "Property two" },
      ]
      for (let i = 0; i < personOneChild.length; i++) {
        this.addControls('myArray')
      }
      this.form.patchValue({
          'myArray': personOneChild
        });
    } 
    if (e.target.value == 2) {
      let personTwoChild = [
        { property_name : "Property three" },
        { property_name : "Property four" },
        { property_name : "Property five" },
      ]
      for (let i = 0; i < personTwoChild.length; i++) {
        this.addControls('myArray')
      }
      this.form.patchValue({
          'myArray': personTwoChild
        });
    }
  }

  addControls(control: string) {
    let question: any = this.questions.find(q => q.key == control);
    let children = question ? question.children : null;
    if (children)
      (this.form.get(control) as FormArray).push(this.qcs.toFormGroup(children))
  }

  removeControls(control: string) {
    let array = this.form.get(control) as FormArray;
    array.removeAt(array.length - 1);
  }

清除有效的堆栈闪击：https://stackblitz.com/edit/angular-x4a5b6-fnclvf

您可以在上面的链接中解决，如果您选择一个人，则名为property one and property two的值将绑定到输入，并且在选择框中，property one将突出显示为选中。.< / p>

我真正需要的是实际上是从这里的，我有一个删除按钮，您可以在演示中看到。如果我单击删除按钮，则最后一个将被删除，然后再次单击最后一个被删除。这里我有两个属性one and two，如果我用“删除”按钮删除了两个输入，则选择框中的高亮值person one需要变得未突出显示。

这实际上是我的要求。.如果我删除一个属性，则它仍应处于突出显示状态。.而完全删除这两个属性，则不应该突出显示。.

希望您能得到我的解释。如果有需要，我随时可以提供。

注意：我使用 ng-select ，因为我无法实现该库，我使用html 5 select框来实现。.在{{3} }库，就像添加和删除该选项一样。使用ng-select库的任何解决方案也都可以。

请帮助我实现目标。

我在这样的应用程序中实时运行：

选择了三个模板，每个模板具有一个属性，分别具有一个，两个，三个：

如果选择一个下拉菜单，则各自的属性值将作为子项添加。

ng-select

在这里您可以看到我删除了属性名称3（其父级为模板3），并且即使删除了其子级，模板3仍显示在选择框中。

Answer 1

首先，获得对选择的引用，如下所示：

HTML：

<select multiple (change)="changeEvent($event)" #mySelect>
  <option *ngFor="let opt of persons" [value]="opt.key">{{opt.value}}</option>
</select>

TS：

import { ViewChild } from '@angular/core';

// ...

@ViewChild('mySelect') select;

然后，在删除功能中，检查是否所有元素都已删除，如果已删除，请将value中的select设置为null

if (array.length === 0) {
  this.select.nativeElement.value = null;
}

Here is a fork of the StackBlitz

从选择框中删除选择的选项

1 个答案: