如何知道 Angular 表单中 html 元素的位置答案

【问题标题】：How to know position of html element in Angular Form如何知道 Angular 表单中 html 元素的位置
【发布时间】：2021-06-14 19:09:40
【问题描述】：

单击具有 (click)='getFormPosition' 的“添加字段”按钮时，我试图在表单中获取位置单击该按钮时，我想在表单中获得位置，因此在这种情况下，我想获得：(SaleToPOIRequest.DiagnosisRequest) 或 SaleToPOIRequest => DiagnosisRequest。

我正在寻找一种方法来了解我属于哪个形式的组以及它上面的组。

在下面的示例中，按钮位于 formGroup:DiagnosisRequest 和上面的 SaleToPOIRequest 中。这就是为什么预期的结果是这样的：SaleToPOIRequest.DiagnosisRequest 或 SaleToPOIRequest => DiagnosisRequest。

<div class="request-form" formGroupName="SaleToPOIRequest">
      <div formGroupName="DiagnosisRequest">
        <table>
          <thead>
          <tr>
            <td>
              <span>DiagnosisRequest</span>
            </td>
            <td class="form-buttons">
              <button color="primary" (click)='getFormPosition' mat-raised-button>Add Field</button>
              <button color="primary" mat-raised-button>Add Category</button>
            </td>
          </tr>
          </thead>
          <tbody>
          <tr>
            <td>
              <mat-form-field>
                <mat-label>HostDiagnosisFlag</mat-label>
                <input formControlName="HostDiagnosisFlag" matInput>
              </mat-form-field>
            </td>
          </tr>
          </tbody>
        </table>
      </div>
</div>

如果您想知道，这是我的 ts：

public DiagnosisRequestForm: FormGroup = new FormGroup({
  SaleToPOIRequest: new FormGroup({
      DiagnosisRequest: new FormGroup({
        HostDiagnosisFlag: new FormControl(''),
      }) 
   })
 })

【问题讨论】：

[link] (kirupa.com/html5/get_element_position_using_javascript.htm) 这可能会有所帮助。
你试图在表格中获得位置是什么意思？你想得到什么职位？从何而来？做什么？我没有给你最终目标。请给我们更多细节
@crg 有一个具有 formGroupName="SaleToPOIRequest" 的 div 并且在该 div 内部是另一个具有 formGroupName="DiagnosisRequest" 的 div 通过单击按钮调用函数时我想知道表单的位置我是吗。所以预期的结果会给我 SaleToPOIRequest => DiagnosisRequest 或 SaleToPOIRequest.DiagnosisRequest ，我想在多个地方使用它，所以我需要能够以某种方式知道调用函数的元素上方的表单组的代码。
@satyen 我不想知道位置，因为我猜像素但是在表单中的位置，所以我想知道我的元素上方的所有表单组。
好的，你想获取一个表单元素在 DOM 树中的位置。 但为什么呢？闻起来像XY。

标签： angular forms

【解决方案1】：

坦率地说，我没有这个问题的答案，因为我认为不可能以干净的方式做到这一点。

所以对我来说，解决方案是对其进行整体改造并递归执行，以便在 TS 中更轻松地添加另一个 formControl/group，然后再次更新或生成整个 html。

以下是引用递归生成问题的问题：

Generate form trough loop

Generate table from form

【讨论】：

【解决方案2】：

// you can use an id on div with DiagnosisRequest
 in JS
var el = document.getElementById('DiagnosisRequest')
window.alert(el.offsetLeft)
//for X,Y position
const elbc = el.getBoundingClientRect()
window.alert(elbc.x+" "+elbc.y) 

//if you are using ts and angular 
@ViewChild("DiagnosisRequest", { static: false }) dr: ElementRef;

//then you can get this.dr.nativeElement.offsetLeft

【讨论】：

在元素上使用和 id 效率非常低我有很多这样的按钮，所以如果我想让它们全部工作，我必须添加很多 id。我正在寻找可以在任何地方使用的更好的解决方案。
另外，我不是在寻找像素位置或类似的东西，而是在我的表单中定位。