在 div 中添加所需的验证器

Question

我想知道是否可以将“必需”验证器放在“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>

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

你能帮帮我吗？

谢谢

Answer 1

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

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

您可以像对其他表单输入字段一样显示错误消息，方法是检查输入字段是否有一些验证错误：

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