Добавьте необходимый валидатор в 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>