如何通过单击按钮取消选中选定的下拉项目？

Question

我有一个 Angular 下拉菜单，在选定的事件中我动态添加新的表单组。我还有一个按钮，单击时我会删除动态生成的表单组。但也希望当用户单击按钮时，为组生成这个新的下拉选择项，这次取消选择。

当我使用时

this.selectModel.reset();

而selectModel这里是ngModel的临时变量

#selectModel="ngModel"

它会重置所有下拉项目。我怎样才能只重置一个？

<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>

打字稿文件：

  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

单击按钮绑定单击事件并重置该字段的值 使用 ngModel 或表单控件。 或者您也可以将该表单控件的值作为空字符串或 null 传递。

希望它对你有用...