时间戳

首页 > 解决方案 > 在 div 中添加所需的验证器

html - 在 div 中添加所需的验证器

问题描述

我想知道是否可以在“div”上放置“必需”验证器？

让我解释一下：我有一个由另一个组件更新的列表（这个 div）。当我验证我的表单时，我想检查这个 div 是否已填写。如果没有，则显示消息“需要联系”

div *ngIf="contacts.length > 0">
          <div fxLayout="row wrap" fxLayoutAlign="start center">
            <span class="mr-1">Contacts :</span>
            <div *ngFor="let contact of contacts; index as i" class="chip">
              {{contact.mail}}
              <i (click)="deleteContact(i)" class="fas fa-times"></i>
            </div>
          </div>
        </div>

        <div *ngIf="(contacts.length == 0)">
          <div>Empty</div>
        </div>

当它是另一个组件（输入）时，我会这样进行并且它可以工作：

<div class="form-group">
          <label for="subject">Subject *</label>

          <input type="text" name="subject" id="subject" [(ngModel)]="message.subject" minlength="1" placeholder="Subject"
            [ngClass]="{ 'is-invalid': submitted && f.sujet.errors }" formControlName="subject" class="form-control">

          <div *ngIf="submitted && f.subject.errors" class="invalid-feedback">
            <div *ngIf="f.subject.errors.required">Required(1 character minimum)</div>
          </div>
        </div>

除了在我目前的情况下这是不可能的......

你能帮助我吗 ？

谢谢

标签： htmlangulartypescriptvalidationrequiredfieldvalidator

解决方案

我想您的目标是使用该Form Validators功能。只是一个快速的想法：

在您的表单中使用隐藏<input />字段并将绑定添加到某些contacts属性（eq length）。然后，您可以尝试使用一些内置的，Form Validators也可以构建自定义的，它将检查隐藏输入字段的值是否大于0.

通过检查输入字段是否有一些验证错误，您可以以与其他表单输入字段相同的方式显示错误消息：

 <div *ngIf="submitted && f.your_hidden_field.errors" class="invalid-feedback">
    Contacts are required
 </div>

推荐阅读