How can I uncheck selected drop down item with the click of button?

Question

I have an Angular drop down, where on selected event I dynamically add new form groups. I have also a button where on click I remove the dynamically generated form group. But also a want when the user clicks on the button, the dropdown selected item which generated this new for group, to be unselected this time.

When i use

this.selectModel.reset();

and selectModel here is the temporary variable of ngModel

#selectModel="ngModel"

it resets all dropdown items. How can I reset just one?

<h1>Select the languages that you have knowledge of </h1>
<select class="selectingPL" #selectModel="ngModel" [(ngModel)]="selectedLevel" (change)="selected($event)" multiple>
  <option *ngFor="let item of allProgrammingLanguges;let i = index" [ngValue]="item">
    {{item}}
  </option>
</select>

<div class="forma" *ngIf="isItConfirmed" [formGroup]="userForm">
    <div formArrayName="skills" *ngFor="let skill of userForm.get('skills').controls; let i = index">
      <div [formGroupName]="i">

        <!-- <div *ngFor="let item of arr"> -->
          <div class="form-group">
            <label class="col-sm-2 control-label" [attr.for]="'skillName' + i">
              {{item}}
            </label>
          </div>

          <div class="form-group">
            <label class="col-sm-2 control-label" [attr.for]="'experienceInYears' + i">
              Set the expirience in years for {{item}}
            </label>
            <div class="col-sm-4">
              <input type="text" class="form-control" [id]="'experienceInYears' + i" formControlName="experienceInYears"
                placeholder="In Years">
              <!-- <div *ngIf="experienceInYears.errors.required">
                        <p>required</p>
                        </div> -->
              <!-- <span class="help-block" *ngIf="formErrors.experienceInYears">
                      {{formErrors.experienceInYears}}
                  </span> -->
            </div>
          </div>

          <div class="form-group">
            <label class="col-md-2 control-label">Set the Proficiency level for {{ item }}</label>
            <div class="col-md-8">
              <label class="radio-inline">
                <input type="radio" value="beginner" formControlName="proficiency">Beginner
              </label>
              <label class="radio-inline">
                <input type="radio" value="intermediate" formControlName="proficiency">Intermediate
              </label>
              <label class="radio-inline">
                <input type="radio" value="advanced" formControlName="proficiency">Advanced
              </label>
              <!-- <span class="help-block" *ngIf="formErrors.experienceInYears">
                      {{formErrors.proficiency}}
                  </span> -->
            </div>
          </div>
          {{ userForm}}
          <div class="col-sm-6" *ngIf="userForm.get('skills')">
              <button type="button" class="btn btn-danger btn-sm pull-right"
                      title="Delete Skill" (click)="removeSkillButtonClick(i)">
                      Remove
                <span class="glyphicon glyphicon-remove"></span>
              </button>
            </div>

          <div class="hr"></div>
        <!-- </div> -->
         <!-- //tuka zavrsuva gornoto -->
      </div>
    </div>

Typescript file:

  userForm:any;

  arr = [];
  isItConfirmed = false;
  selected(event){
    this.arr = this.selectedLevel;
    (<FormArray>this.userForm.get('skills')).push(this.addSkillFormGroup());

    this.isItConfirmed = true;
  }




  addSkillFormGroup()
  {
    return this.fb.group({
      skillName: ['', Validators.required],
      experienceInYears: ['', Validators.required],
      proficiency: ['', Validators.required]
    });
  }


 @ViewChild('selectModel') private selectModel: NgModel;

  removeSkillButtonClick(skillGroupIndex: number) {

    this.selectModel.reset();
    (<FormArray>this.userForm.get('skills')).removeAt(skillGroupIndex);
  }

Answer 1

On click Of Button Bind Click Event And Reset the Value Of that filed using ngModel Or Form Control. or you can also pass the value of that form control as an empty string or null.

Hope It'll Work For You...