如何在角度7中设置初始值和验证到ng自动完成？

Question

我正在做一个项目。在那里，我想进行验证并将初始值设置为自动完成。假设：如果用户未在自动完成框中选择任何内容。我们应该显示验证错误。“请选择国家”。请帮帮我。

码：

<div style="text-align:center">

  <h1>

    Angular autocomplete

  </h1>

  <img width="100" alt="Angular Logo"

       src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">

</div>

<div class="ng-autocomplete">

  <ng-autocomplete

    [data]="countries"

    [searchKeyword]="keyword"

    placeHolder="Enter the Country Name"

    (selected)='selectEvent($event)'

    (inputChanged)='onChangeSearch($event)'

    (inputFocused)='onFocused($event)'

    historyIdentifier="countries"

    [itemTemplate]="itemTemplate"

    [notFoundTemplate]="notFoundTemplate">

  </ng-autocomplete>

  <ng-template #itemTemplate let-item>

    <a [innerHTML]="item.name"></a>

  </ng-template>

  <ng-template #notFoundTemplate let-notFound>

    <div [innerHTML]="notFound"></div>

  </ng-template>

</div>

component.ts：

import { Component } from '@angular/core';

@Component({

  selector: 'my-app',

  templateUrl: './app.component.html',

  styleUrls: [ './app.component.css' ]

})

export class AppComponent  {

  keyword = 'name';

  public countries = [

    {

      id: 1,

      name: 'Albania',

    },

    {

      id: 2,

      name: 'Belgium',

    },

    {

      id: 3,

      name: 'Denmark',

    },

    {

      id: 4,

      name: 'Montenegro',

    },

    {

      id: 5,

      name: 'Turkey',

    },

    {

      id: 6,

      name: 'Ukraine',

    },

    {要查看完整的项目链接：https：//stackblitz.com/edit/angular-ng-autocomplete

Answer 1

selectEvent()每次选择一个选项时，您都可以在哪个触发器中更改布尔值。我做了一个StackBlitz的例子只是为了澄清，你可以玩，并做出自己的行为。编辑：这个StackBlitz根据评论中的要求提供反应形式。