angular - 数据网格强制验证消息未正确显示角度

Question

请参考附件视频。

视频

预期结果 - 验证不显示新添加的行

实际结果 - 一旦通过验证触发一行，它也会显示在新添加的行中

这是我添加新行按钮的源代码。

  public newRowClicked(){
    debugger
    // create new empty row
    var row:entities.DataRow = new entities.DataRow()
    row.fields = JSON.parse(this.template)
    row.fields.forEach(f => { f.value=null })
    this.dataSet.rows.push(row)
  }

HTML

<!-- HEADER -->
<div class="table-row">
  <div *ngFor="let header of columnHeaders" [ngStyle]="{'width': (100/(columnCount+1))+'%'}" class="table-cell">
    {{header.headerText}}
    <span *ngIf="header.isRequired" style="color:red">*</span>
  </div>
  <div [ngStyle]="{'width': (100/(columnCount+1))+'%'}"></div>
</div>

<!-- FIELDS -->
<div *ngFor="let row of dataSet.rows; index as i">
  <app-data-row-view
          [field]="field"
          [disabled]="disabled"
          [formSubmitted]="formButtonClicked"
          [isEditMode]="true"
          [dataRow]="row"
          [columnCount]="columnCount"
          [index]="i"
          (deleteRowClicked)="deleteRowClicked($event)"></app-data-row-view>
</div>

<!-- CONTROLS -->
<button *ngIf="!disabled" (click)="newRowClicked()" class="btn btn-sm">New Row</button>

<!-- <button style="margin-left:3px" *ngIf="!disabled" (click)="fromCsvClicked()" class="btn btn-secondary btn-sm">From CSV</button> -->
<button class="to-csv-btn" style="margin-left:3px" *ngIf="dataSet.rows.length>0" (click)="viewAsCsvClicked()" class="btn btn-sm">To CSV</button>
<button class="to-json-btn" style="margin-left:3px" *ngIf="dataSet.rows.length>0" (click)="viewAsJsonClicked()" class="btn btn-sm">To JSON</button>

这是在数据网格源代码中创建一行

  public addToGrid(){

    // creating the row
    var row: entities.DataRow = new entities.DataRow()
    this.field.dynamicSectionFields.forEach(f => {
      row.fields.push(f)
    })

    // pushing to the list
    this.dataSet.rows.push(JSON.parse(JSON.stringify(row)))

    console.log(this.dataSet)

    window.localStorage.setItem("ds", JSON.stringify(this.dataSet))
  }

标签： angulartypescript