时间戳

首页 > 解决方案 > 在“ng2-smart-table”中编辑或输入数据时验证

angular - 在“ng2-smart-table”中编辑或输入数据时验证

问题描述

在编辑或引入数据时如何验证数据？在事件中(createConfirm)/(editConfirm)我可以验证它们，但我也想在每个文本框的标签中显示验证消息。

标签： angularvalidationng2-smart-table

解决方案

嗨，如果您想在表单上显示标签，请通过以下代码。

.ts

import { FormGroup, FormControl, Validators } from '@angular/forms';

MTDeviceSetupFormControl = new FormControl('', [
    Validators.required,
  ]);

.html

<div class="form-group">
    <label class="control-label" for="name">Name *</label>
    <div class="col-sm-9">
      <input type="text" maxlength="15" class="form-control" required name="Name" [(ngModel)]="name.emp_name">
    </div>
  </div>
  <label [hidden]="name.emp_name">Enter Name</label>

如果您想在编辑后使用内部表格，请通过以下代码：

            <ng-container matColumnDef="name">
              <mat-header-cell *matHeaderCellDef mat-sort-header> Name </mat-header-cell>
              <mat-cell *matCellDef="let row">
                <span *ngIf="row_id != row.emp_id">{{row.emp_name}}</span>
                <form>
                  <mat-form-field *ngIf="row_id == row.emp_id" floatPlaceholder="never">
                    <input matInput maxlength="15" required [formControl]="EmpFormControl" placeholder="Name" [value]="name.emp_name"
                      [(ngModel)]="name.emp_name">
                    <mat-error *ngIf="EmpFormControl.hasError('required')">
                      <span *ngIf="!name.emp_name">
                        <label>Name Required</label>
                      </span>
                    </mat-error>
                  </mat-form-field>
                </form>
              </mat-cell>
            </ng-container>

推荐阅读