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

时间:2018-07-26 06:34:08

标签: angular validation ng2-smart-table

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

1 个答案:

答案 0 :(得分:1)

您好,如果您想在表单上显示标签,请通过以下代码进行操作。

.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>