在Angular中，如何从一个FormArray对象中获取索引？

Question

我这里有一个表格：

 form = this.fb.group({
    username: new FormControl('', Validators.required),
    password: new FormControl('', [
      Validators.required,
      Validators.minLength(10),
    ]),
    confirmPassword: new FormControl('', Validators.required),
    firstname: new FormControl('', Validators.required),
    lastname: new FormControl('', Validators.required),
    email: new FormControl(null, [Validators.required, Validators.email]),
    phone: new FormControl(null, [
      Validators.required,
      Validators.pattern(
        '^\s*(?:\+?(\d{1,3}))?[-. (]*(\d{3})[-. )]*(\d{3})[-. ]*(\d{4})(?: *x(\d+))?\s*$'
      ),
    ]),
    roles: this.fb.array([]),
  });

请注意，只有角色是一个 formArray 对象，现在我有一个与多个复选框相关的功能，我想存储用户拥有的值 selected/checked:

函数如下：

 onChange(event: any) {
    console.log(event);
    console.log(this.form);
    const roleFormArray = <FormArray>this.form.value.roles;
    if (event.target.checked) {
      roleFormArray.push(event.target.defaultValue);
    } else {
      let index = roleFormArray.value.findIndex(
        (x) => x.value == event.target.defaultValue
      );
      roleFormArray.removeAt(index);
    }
  
  }

在HTML上，就这么简单：

 <div class="form-check">
        <input
          class="form-check-input"
          type="checkbox"
          value="User"
          id="userCheck"
          (change)="onChange($event)"
        />
        <label class="form-check-label" for="userCheck"> User </label>
        <br />
        <input
          class="form-check-input"
          type="checkbox"
          value="Manager"
          id="managerCheck"
          onchange="onChange($event)"
        />
        <label class="form-check-label" for="managerCheck"> Manager </label>
</div>

所以基本上我希望我的代码运行，如果用户检查角色 - 用户，那么它应该添加到数组“用户”（这是成功的），但是当用户取消选择用户复选框时，它抛出错误 - 无法读取未定义的属性 'findIndex'

不知道为什么findIndex 不能提供我来自FormArray 的索引。有什么建议么？谢谢！！

Answer 1

您添加复选框值和从 formarray 中删除复选框值的方式是错误的。在 select 上，您需要创建 formcontrol 并将其添加到 formarray 上。在 deselect 你需要从 formarray 中移除 formcontrol。

onChange(event: any) {
    console.log(event);
    console.log(this.form);
    const roleFormArray = <FormArray>this.form.controls['roles']; // Corrected
    if (event.target.checked) {
      roleFormArray.push(this.fb.control(event.target.defaultValue)); // Push control not value.
    } else {
      let index = roleFormArray.controls.findIndex( // Find item from controls.
        (x) => x.value == event.target.defaultValue
      );
      roleFormArray.removeAt(index);
    }
  
  }

在Angular中，如何从一个FormArray对象中获取索引？

In Angular, how to get index from a FormArray object?

form-control

angular

formarray