In general, made an element that adds tags like SO:

<div class="form-group"> <div> <div class="row"> <label class="col-form-label col-sm-2" for="search">Теги</label> <div id="tag-editor" class="col-sm-10 form-control"> <span class="tag" *ngFor="let tag of selectedTags.values()">{{tag.name}}<a class="close" (click)="onRemove(tag)">&times;</a></span> <input id="tag-search" name="search" placeholder="Search" #searchTag (input)="doSearchTag(searchTag.value)" (keydown)="onKeyDown($event)" autocomplete="off" /> </div> </div> <div class="row"> <div id="search-results" class="col-sm-10 offset-md-2" *ngIf="searchResult&&searchResult.length>0"> <div class="search-result unselectable" *ngFor="let tag of searchResult" (click)="onSelectTag(tag)"> {{tag.name}} -> {{tag.description}}</div> </div> </div> </div> </div>

When you select an item from the list, it is added to the component collection, and then a span-rectangle with the tag name is drawn to the left.

Actually, the question is:

I can somehow cunningly hang this required and use a template variable, which would then be used in an expression like [disabled]="!tags.valid" ?

  • I noticed such a consistency that you often answer your question with a question, why don't you try first and then create a question here? Сначала более подробно опишите проблему, которую вы сформулировали в заголовке. Поясните, как вы столкнулись с проблемой и что препятствует её решению. - overthesanity
  • @overthesanity I tried to achieve the desired result using the scientific method, but something didn’t work out ... Actually, I wondered if it was possible to hang validation on it through the template variable. Because on ordinary input everything is hung up without any problems. - iluxa1810

0