Remove the selected option from select box

问题

I am making angular application with angular form.

Here i have given a form with input fields first name and last name which will always showing..

After that i am having children which will be displayed upon clicking the add button and the children will get removed on click remove button.

As of now everything works fine.

Here i am making patching of data to the inputs on click option from select box.. The neccessary inputs gets patched..

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

Clear working stackblitz: https://stackblitz.com/edit/angular-x4a5b6-fnclvf

You can work around in the above link that if you select the person one option then the value named property one and property two gets binded to the inputs and in select box the property one is highlighted as selected..

The thing i am in need is actually from here, I am having a remove button, you can see in demo.. If i click the remove button, one at last will be got removed and again click the last gets removed.. Here i am having two property one and two, if i remove both the inputs with remove button, the the highlighted value person one in select box needs to get not highlighted.

This is actually my requirement.. If i remove either one property then it should be still in highlighted state.. Whereas completely removing the both properties it should not be highlighted..

Hope you got my point of explanation.. If any needed i am ready to provide.

Note: I use ng-select for it as i am unable implement that library, i am making it with html 5 select box.. In ng-select library it will be like adding and removing the option.. Any solution with ng-select library also appreciable..

Kindly help me to achieve the result please..

Real time i am having in application like this:

Selected three templates and each has one property with one,two,three respectively:

If choose a dropdown then the property values for the respective will get added as children.

Here you can see i have deleted the property name three for which the parent is template three and the template three still shows in select box even though i removed its children

回答1:

Firstly, get a reference to the select, like so:

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;

Then, in your remove function, check if all elements have been removed, and if they have, set the value of the select to null

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

Here is a fork of the StackBlitz

来源：https://stackoverflow.com/questions/53316581/remove-the-selected-option-from-select-box