在角度 5 中验证表格内的输入文本用户输入

Posted 2023-03-13

【中文标题】在角度 5 中验证表格内的输入文本用户输入

【英文标题】：Validate the input text user-entry inside table in angular 5

【发布时间】：2020-08-26 21:33:46

【问题描述】：

html文件

            <mat-table #table [dataSource]="CMDataSource">
              <ng-container matColumnDef="mQues">
                <mat-header-cell *matHeaderCellDef> Ticket Volume </mat-header-cell>
                <mat-cell *matCellDef="let element"> <label> element.mQues </label> </mat-cell>
              </ng-container>

              <ng-container matColumnDef="metricUnit">
                <mat-header-cell *matHeaderCellDef></mat-header-cell>
                <mat-cell *matCellDef="let element">
                  <mat-form-field>
                    <input type="number" matInput (change)="userMCState(element.mQuesId, $event.target.value)">
                  </mat-form-field>
                </mat-cell>
              </ng-container>
              <mat-header-row *matHeaderRowDef="displayedColumnsHeaderName"></mat-header-row>
              <mat-row *matRowDef="let row; columns: displayedColumnsHeaderName;">
              </mat-row>
            </mat-table>

          <button mat-raised-button (click)='submitMA()'> SUBMIT </button>

组件文件

const CM_DATA: MetricsAssess[] = [
   mQuesId: 1, mQues: 'English', metricUnit: 'hour' ,
   mQuesId: 2, mQues: 'French', metricUnit: 'hour' ,
   mQuesId: 3, mQues: 'Spanish', metricUnit: 'hour' ,
   mQuesId: 4, mQues: 'German', metricUnit: 'hour' 
];
  CMDataSource = new MatTableDataSource(CM_DATA);

  userMCState(questionNum, statusValue): void 
    this.mArray.push( "quesNum": questionNum, "userAns": statusValue);
  

   submitMA(): void 
**//VALIDATE THE USER INPUT & if the ENTRY is BLANK, request the user to make entry**
    let pMDataJSON = 
      mAssessJSONArray: this.mArray
    ;
  

这里是从表格和输入文本框中显示的一组问题。 需要验证用户输入是NUMBER，并且如果没有输入，则请求对话框输入。 请帮助我。

【问题讨论】：

if (this.mArray.some(q => typeof q.statusValue !== 'number)) throw Error('invalid'); 。你不想扔，但我确定你明白了。

【参考方案1】：

请按照以下步骤休息。

删除更改事件，因为它会在每次值更改时触发。 尝试与 ngModel 一起使用

<input type="number" matInput [(ngModel)]= "element.statusValue">

使用循环在submitMA() 中进行验证，如下所示

 submitMA(): void 
    let isError=false;
    for(const obj of this.mArray)
    
    if(!obj.statusValue || !Number.isInteger(obj.statusValue))
    
    isError=true;
    alert(some error occurred)
    break;
    
    
    if(isError)
    
    return false
    
    
   // .. possitive scenario codes 
    

注意：你的模型类应该有statusValue 属性。