Question

我是Angular上的新手，如果这是一个虚拟问题，我深表歉意，但是无论如何。

我在Angular 6中具有以下结构：

<form [formGroup]="form" novalidate (submit)="doStuff()">
  <table>
    <thead>
      <tr>
        <th>#</th>
        <th>Key</th>
        <th>Select</th>
      </tr>
    </thead>
    <tbody>
    <tr *ngFor="let user of users; index as i">
      <th>{{i+1}}</th>
      <td>{{user?.key}}</td>
      <td><input type="checkbox" [formControl]="form.controls['selectedUsersGroup'].controls[i]"></td>
    </tr>
    </tbody>
  </table>
  <div>
    <a href="#"><button type="submit">Do</button></a>
  </div>
</form>

基本上，我有一个用户列表，我的服务将返回该用户列表，并且我只想获取在表单用户上选择的键（单击复选框）。

在我的组件中，我创建了具有错误值的表单和数组，并与复选框相关联（因为默认情况下未选择任何用户）：

constructor(private formBuilder: FormBuilder) {
  this.usersSelected = new Array(10).fill(false);
  this.form = this.formBuilder.group({
    selectedUsersGroup: this.formBuilder.array(this.usersSelected)
  });
}

有趣的是，当我必须获取选定用户的密钥时。单击“提交”按钮时，将调用以下方法：

doStuff() {

   //get checkboxes group
   this.usersSelected= this.form.get('selectedUsersGroup').value;

   //get indexes of selected checkboxes
   var indexes = [];
   var idx = this.usersSelected.indexOf(true);
   while (idx != -1) {
     indexes.push(idx);
     idx = this.usersSelected.indexOf(true, idx + 1);
   }

   //get keys of users by indexes of selected checkboxes
   var keys = [];
   for (var i = 0; i < indexes.length; ++i) {
     keys.push(this.users[indexes[i]].key);
   }
 }

这很好用，但看起来太沉重了，我敢肯定有一个更简单，更优雅的解决方案。

如果有人可以指出我的意思，我会很高兴）

使用Angular 6收集复选框值（动态创建）

0 个答案: