如何在Angular 4+中获取FormControl的完整路径

Question

如何在Angular 4+中获取FormControl的完整路径？

我有一个响应式表单：

{
    name: '',
    address: {
        city: '',
        country: ''
    }
}

我真的需要获取控件的完整路径：

const addressFormGroup = this.form.get('address');
const cityControl = addressFormGroup.get('city');
cityControl.plsGiveMeFullPath() //address.city

有没有现成的方法可以获取 cityControl: FormControl | FormGroup 的完整路径？

- Nyahahahaha

Answer 1

我实现了这两个方法来获得这个功能。

第一个方法是一个帮助器，返回控件的名称（在其父级中索引）。该函数通过在其父对象的controls对象上搜索与您提供的控件相等的控件，然后返回键来实现目的。

第二个方法是一个递归函数，使用上面的帮助器返回控件的名称，并为控件的父级调用自身，使用点号('.')将返回字符串连接起来。

  getControlName(c: AbstractControl): string | null {
    if(!c.parent) return null;
    const formGroup = c.parent.controls;
    return Object.keys(formGroup).find(name => c === formGroup[name]) || null;
  }

  getControlPath(c: AbstractControl, path: string): string | null {
    path = this.getControlName(c) + path;

    if(c.parent && this.getControlName(c.parent)) {
      path = "."+path;
      return this.getControlPath(c.parent, path);
    } else {
      return path;
    }

  }

- Marc

---

谨告知，您可以使用以下代码来避免在路径末尾添加句点 path.to.name：if (path === '.') { path = getControlName(c); } else { path = getControlName(c) + path; } - Doua Beri

不再起作用了。formGroup[name] 给我一个错误：Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ [key: string]: AbstractControl; } | AbstractControl[]'. No index signature with a parameter of type 'string' was found on type '{ [key: string]: AbstractControl; } | AbstractControl[]'. 有什么办法可以修复它吗？ - lonix

Answer 2

@lonix 这段内容太长了，不适合作为评论...

formGroup 可以是 AbstractControl[] 或者 { [key: string]: AbstractControl }，因此只需测试是否为数组即可，一切都会按预期工作：

export const getControlName = (control: AbstractControl): string | null => {
  if (control.parent == null) {
    return null;
  }

  const children = control.parent.controls;

  if (Array.isArray(children)) {
    for (let index = 0; index < children.length; index++) {
      if (children[index] === control) {
        return `${index}`;
      }
    }
    return null;
  }

  return Object.keys(children).find(name => control === children[name]) || null;
};

- Lars