selectModel =“ ngModel”

Question

我有角度下拉菜单，在选定的事件上，我动态添加了新的表单组。还有一个按钮，在单击时，我删除了动态生成的表单组。但是，当用户单击按钮时，也想要一个按钮选中的项目将为组生成此新项目，这次将取消选中该项目。

当我使用 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>




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

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

希望它对您有用...

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

selectModel =“ ngModel”

1 个答案: