如何从组件访问表单属性？

Question

在我的 html 组件中，我有如下代码：

<table mat-table class="scan-list" [dataSource]="dataSource" multiTemplateDataRows>
  <ng-container matColumnDef="{{ column }}" *ngFor="let column of columnsToDisplay">
    <th mat-header-cell *matHeaderCellDef>{{ column }}</th>
    <td mat-cell *matCellDef="let scan">{{ scan[column] }}</td>
  </ng-container>

  <ng-container matColumnDef="expandedDetail">
    <td mat-cell *matCellDef="let scan" [attr.colspan]="columnsToDisplay.length">
      <div class="scan-detail" [@detailExpand]="scan == expandedElement ? 'expanded' : 'collapsed'">
        <div class="scan-description">
          <div class="actions">
              <button [disabled]="isDisabled" mat-button class="edit-scan">
                <mat-icon (click)="editScan(scan)" matTooltip="Edit" matTooltipClass="scan-description-tooltip" aria-label="Edit button">
                  edit
                </mat-icon>
              </button>
          </div> <!-- .actions -->
          <form [id]="scan.id" [formGroup]="editScanForm" #f="ngForm"> 
            .
            .
            .
          </form>
        </div> <!-- .scan-description -->
      </div> <!-- .scan-detail -->
    </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="columnsToDisplay sticky: true"></tr>
  <tr mat-row *matRowDef="let scan; columns: columnsToDisplay;"
      class="scan-row"
      [class.scan-expanded-row]="expandedElement === scan"
      (click)="expandedElement = expandedElement === scan ? null : scan">
  </tr>
  <tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="scan-detail-row"></tr>
</table>

我想获取 'myComponent.ts' 文件中 [id] 属性的值，因为我在应用程序中有更多表单，所以我想知道每个表单都有哪个 ID。我的代码如下：

import { Component, OnInit, Input } from '@angular/core';
.
.
.
export class ScanListComponent implements OnInit {
   @Input('id') scanFormId: number;
   editScan(scan){
      if(scan.id == this.scanFormId){
        this.editScanForm.enable();
      }
      this.isDisabled = true;
      this.isHidden = false;
    }
 }

谁能帮我 Angular 6-8 版本？

Answer 1

试试这个

在你的HTML中：

<form [id]="scan.id" [formGroup]="editScanForm" #f="ngForm" #formElement>
</form>

在你的组件中：

 @ViewChild('formElement') el:ElementRef;

ngAfterViewInit()
{
   console.log('element id',this.el.nativeElement.id);
}

如何从组件访问表单属性？

How access form attributes from component?

angular

angular6

angular7

angular8