在 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屬性（eq length ）。 然后，您可以嘗試使用一些內置的Form Validators ，也可以構建自定義的Form Validators ，它會檢查隱藏輸入字段的值是否大於0 。

通過檢查輸入字段是否有一些驗證錯誤，您可以以與其他表單輸入字段相同的方式顯示錯誤消息：

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