开发者问题收集

使用 select 动态更新两个数组

2021-07-28
428
angular typescript forms

我有 2 个数组，人员数组包含分配给项目的所有人员（最初为空），可用用户数组包含系统中所有用户的列表。 （每个用户都是一个对象）。

这是我的 ngOnInit 

 ngOnInit(): void {
    this.personnel = [];
    this.availableUsers = this.usersService.getAllUsers();
    this.addPersonnelForm = new FormGroup({
      'addSelect': new FormControl(null, Validators.required)
    })

我的组件中有 2 个表单，都很简单，只有一个 <select>选项和一个按钮，addPersonnelForm 用于将选定的用户对象推送到 this.personnel，removePersonnelForm 用于将选定的用户对象推送到 this.availableUsers。

这意味着必须从这两个表单中的相应数组中选择的对象从该数组中删除（因为用户只能在 avaliableUsers 或 personnel 中，不能同时在两者中）

我的 html + 表单代码： 

<table class="table">
      <thead class="table-dark">
      <tr>
        <th scope="col">#</th>
        <th scope="col">Name</th>
        <th scope="col">Email</th>
        <th scope="col">role</th>
      </tr>
      <tr class="table-light" *ngFor="let person of personnel; let i = index">
        <td>{{i+1}}</td>
        <td>{{person.name}}</td>
        <td>{{person.email}}</td>
        <td>{{person.role}}</td>
      </tr>
      </thead>
    </table>


 <form [formGroup]="addPersonnelForm" (ngSubmit)="addPersonnel()">
      <div class="col-md-12">
        <div class="col-md-6" style="float:left;">
          <label class="form-label" for="addSelect">select</label>
          <select id="addSelect" class="form-select" formControlName="addSelect">
            <option *ngFor="let name of availableUsers;" [ngValue]="name">{{name.email}}</option>
          </select>
        </div>
        <div class="col-md-6" style="float: right">
          <button type="submit" class="btn btn-dark" style="float: right; margin-top: 29px">Add</button>
        </div>
      </div>
    </form>

和我的 addPersonnel() 函数： 

addPersonnel(){
    let selectedUser = this.addPersonnelForm.value.addSelect;
    this.personnel.push(selectedUser);
    let index = this.availableUsers.indexOf(selectedUser)
      this.availableUsers.splice(index, 1);
  }

我面临的问题是，在我从 addPersonnelForm 中选择并提交后，它可以工作，但表单在提交时不会被清除，前端显示 availableUsers 数组中的第一个对象，以便它被“选中”，而 selectedUser 保持与之前选择的值相同，除非我手动选择另一个选项并重新选择已经“选中”的选项，如果我无论如何点击提交，我会得到我的 HTML 表格代码中出现 ERROR TypeError: person_r4 is null 之类的错误。我尝试在 addPersonnel() 函数中使用 personnelForm.reset()，但什么也没发生。

问题不在于数组，它们会针对我添加/删除的每个用户进行动态更改（只要我在提交一次后选择自己的选项），问题是表单在提交时未清除，并且当数组中只剩下 1 个用户时，错误的值会发送到后端，因为我无法执行我之前所说的操作。

请帮我修复此问题或提供替代解决方案，谢谢。

2个回答

如果我正确理解了您的问题，您希望在每次提交表单时清除 formValue 。在 addPersonnel() 函数中调用 reset() 是正确的方法，在我看来，它可以按预期工作： stackblitz 。

您也可以选择将值传递给 reset() ，如下所示： 

this.addPersonnelForm.reset({addSelect: null});
lbsn
2021-07-28

我找到了解决方案，将其发布以防对任何人有帮助，

我只是添加了一个已禁用和预先选择的默认选项，并调用了 setDefaults() 方法，该方法会使 formControl 和 patchValue 为 null。 

setDefaults() {
    this.addPersonnelForm.get("addSelect").patchValue(null);
    this.removePersonnelForm.get("removeSelect").patchValue(null);
  }

  addPersonnel(){
    let selectedUser = this.addPersonnelForm.value.addSelect;
    this.personnel.push(selectedUser);
    let index = this.availableUsers.indexOf(selectedUser)
    this.availableUsers.splice(index, 1);
    this.setDefaults();
  }

  removePersonnel(){
    this.availableUsers.push(this.removePersonnelForm.value.removeSelect)
    let index = this.personnel.indexOf(this.removePersonnelForm.value.removeSelect)
    this.personnel.splice(index, 1);
    this.setDefaults();
  }

html: 

<form [formGroup]="addPersonnelForm" (ngSubmit)="addPersonnel()">
      <div class="col-md-12">
        <div class="col-md-6" style="float:left;">
          <label class="form-label" for="addSelect">select</label>
          <select id="addSelect" class="form-select" formControlName="addSelect">
            <option [ngValue]="null" disabled>Select user!</option>
            <option *ngFor="let name of availableUsers;" [ngValue]="name">{{name.email}}</option>
          </select>
        </div>
        <div class="col-md-6" style="float: right">
          <button type="submit" class="btn btn-dark" style="float: right; margin-top: 29px" [disabled]="addPersonnelForm.invalid">Add</button>
        </div>
      </div>
    </form>
    <h3 style="margin-top: 100px">Remove Personnel</h3>
    <form [formGroup]="removePersonnelForm" (ngSubmit)="removePersonnel()">
      <div class="col-md-12">
        <div class="col-md-6" style="float:left;">
          <label class="form-label" for="removeSelect">select</label>
          <select id="removeSelect" class="form-select" formControlName="removeSelect">
            <option [ngValue]="null" disabled>Select user!</option>
            <option *ngFor="let person of personnel" [ngValue]="person">{{person.email}}</option>
          </select>
        </div>
        <div class="col-md-6" style="float: right">
          <button class="btn btn-dark" style="float: right; margin-top: 29px" [disabled]="removePersonnelForm.invalid">Remove</button>
        </div>
      </div>
    </form>
suraj bk
2021-07-30