首页 文章

如何获得angular4中多个输入字段的值?

提问于
浏览
0

我在mat-table中定义了输入字段 . 我想在单击 Next 按钮时访问component.ts文件中的那些值 . 我想到了一种访问输入值的方法 . 我还尝试指定name属性,但每个输入标记都是相同的 .

HTML代码:

<ng-container matColumnDef="npm">
                  <mat-header-cell *matHeaderCellDef  fxFlex = "15" style="margin-left: 1%;padding-left: 1%;">NPM</mat-header-cell>
                  <mat-cell *matCellDef="let row" fxFlex = "15"> 
                      <span style ="white-space: nowrap">
                          <input decimal = "true" value= '{{this.selectedAccount.occupancy.npm}}'  style ="display:inline-block; width:55%" #npmValueEntered  required> 
                      </span>
                  </mat-cell>
</ng-container>


<button mat-button [disabled] = "stepTwoFormGroup.invalid || overPercentage || disabledButtons" (click)="submit(stepper)" >Next</button>

1 回答

  • 0

    目前尚不清楚如何访问这些值 . 但一个简单的解决方案是使用ngModel将输入绑定到数据,而不是从数据初始化值:

    <ng-container matColumnDef="npm">
        <mat-header-cell *matHeaderCellDef  fxFlex = "15" style="margin-left: 1%;padding-left: 1%;">NPM</mat-header-cell>
        <mat-cell *matCellDef="let row" fxFlex = "15"> 
            <span style ="white-space: nowrap">
                <input decimal = "true" [(ngModel)]='this.selectedAccount.occupancy.npm'  style ="display:inline-block; width:55%" #npmValueEntered  required> 
            </span>
        </mat-cell>
    </ng-container>
    

    然后,您的 submit 函数可以通过 this.selectedAccount.occupancy.npm 访问该值 .

    但是如果您需要,可以使用评论中建议的表单来更好地控制 .

相关问题