javascript - How to set initial value and validation to ng auto-complete in Angular 7? - Stack Overflow

admin管理员组

文章数量:1339455

In my project I want to do validation and set initial value to an autoplete. Assume: if user does not select anything in the autoplete box, we should show an validation error: "please select the country".

Code:

<div style="text-align:center">
  <h1>
    Angular autoplete
  </h1>
  <img width="100" alt="Angular Logo"
       src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>

<div class="ng-autoplete">
  <ng-autoplete
    [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-autoplete>

  <ng-template #itemTemplate let-item>
    <a [innerHTML]="item.name"></a>
  </ng-template>

  <ng-template #notFoundTemplate let-notFound>
    <div [innerHTML]="notFound"></div>
  </ng-template>
</div>

ponent.ts:

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

@Component({
  selector: 'my-app',
  templateUrl: './appponent.html',
  styleUrls: [ './appponent.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',
    },
    {
      id: 7,
      name: 'Macedonia',
    },
    {
      id: 8,
      name: 'Slovenia',
    },
    {
      id: 9,
      name: 'Georgia',
    },
    {
      id: 10,
      name: 'India',
    },
    {
      id: 11,
      name: 'Russia',
    },
    {
      id: 12,
      name: 'Switzerland',
    }
  ];
    selectEvent(item) {
    // do something with selected item
  }

  onChangeSearch(search: string) {
    // fetch remote data from here
    // And reassign the 'data' which is binded to 'data' property.
  }

  onFocused(e) {
    // do something
  }
}

To see full project link:

In my project I want to do validation and set initial value to an autoplete. Assume: if user does not select anything in the autoplete box, we should show an validation error: "please select the country".

Code:

<div style="text-align:center">
  <h1>
    Angular autoplete
  </h1>
  <img width="100" alt="Angular Logo"
       src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>

<div class="ng-autoplete">
  <ng-autoplete
    [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-autoplete>

  <ng-template #itemTemplate let-item>
    <a [innerHTML]="item.name"></a>
  </ng-template>

  <ng-template #notFoundTemplate let-notFound>
    <div [innerHTML]="notFound"></div>
  </ng-template>
</div>

ponent.ts:

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

@Component({
  selector: 'my-app',
  templateUrl: './app.ponent.html',
  styleUrls: [ './app.ponent.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',
    },
    {
      id: 7,
      name: 'Macedonia',
    },
    {
      id: 8,
      name: 'Slovenia',
    },
    {
      id: 9,
      name: 'Georgia',
    },
    {
      id: 10,
      name: 'India',
    },
    {
      id: 11,
      name: 'Russia',
    },
    {
      id: 12,
      name: 'Switzerland',
    }
  ];
    selectEvent(item) {
    // do something with selected item
  }

  onChangeSearch(search: string) {
    // fetch remote data from here
    // And reassign the 'data' which is binded to 'data' property.
  }

  onFocused(e) {
    // do something
  }
}

To see full project link: https://stackblitz./edit/angular-ng-autoplete

• javascript
• angular
• angular7

Share Improve this question Follow edited Mar 6, 2020 at 23:05 halfer 20.4k1919 gold badges109109 silver badges202202 bronze badges asked May 16, 2019 at 12:42 Kumaresan PerumalKumaresan Perumal 1,96022 gold badges3030 silver badges3939 bronze badges 8

• Do validation and set initial value? what you mean by that? – Just code Commented May 16, 2019 at 12:46
• 1 You can set initial value using initialValue='India' in the ng-autoplete element in the html. But what validation do you intend to do? – user6722034 Commented May 16, 2019 at 12:47
• 1 You can use [ngModel] stackbiz – Alex Char Commented May 16, 2019 at 12:50
• @Arul if user does not select anything i want to show an error like "please select the country". i mean form validation – Kumaresan Perumal Commented May 16, 2019 at 12:55
• @Alex Char how to get value reactive form? i do not want to use ngmodel. please help me – Kumaresan Perumal Commented May 16, 2019 at 13:05

 |  Show 3 more ments

5 Answers 5

Sorted by: Reset to default 4

I had a similar problem. I had to set the value of ng-autoplete in the subscribe() of a http call. I declare my autoplete in .ts file: @ViewChild('aziendaAutoplete') aziendaAutoplete: any; and then i set the initial value and the value of the input:

this.aziendaAutoplete.initialValue = this.aziendeList[0]?.FirmName;
this.aziendaAutoplete.searchInput.nativeElement.value = this.aziendeList[0]?.FirmName;

In my case keyword='FirmName' and it works!

           <div class="ng-autoplete">
            <ng-autoplete
              #aziendaAutoplete
              id="aziendaAutopleteID"
              [data]="aziendeList"
              placeHolder="Cerca un produttore..."
              [searchKeyword]="keyword"
              (selected)='selectEvent($event)'
              (inputChanged)='onChangeSearch($event)'
              (inputCleared)="onClearSearch()"
              [itemTemplate]="itemTemplate"
              [notFoundTemplate]="notFoundTemplate"
              minQueryLength="3"
              [notFoundText]="notFoundText">
            </ng-autoplete>
            <input type="number" formControlName="azienda" style="visibility: hidden"/>
            <div *ngIf="submitted && formParamsControl.azienda.errors" [ngClass]="(submitted && formParamsControl.azienda.errors) ? 'invalid-feedback d-block' : '' ">
              <div *ngIf="formParamsControl.azienda.errors.required">Selezionare il produttore</div>
            </div>

            <ng-template #itemTemplate let-item>
              <a [innerHTML]="item.FirmName"></a>
            </ng-template>

            <ng-template #notFoundTemplate let-notFound>
              <div [innerHTML]="notFoundText"></div>
            </ng-template>
          </div>

To set initial value, set [searchKeyword]="initialValue":

initialValue:string = 'India'

<ng-autoplete
    [data]="countries"
    [searchKeyword]="initialValue"
    [initialValue]="initialValue"
    placeHolder="Enter the Country Name"
    (selected)='selectEvent($event)'
    (inputChanged)='onChangeSearch($event)'
    (inputFocused)='onFocused($event)'
    historyIdentifier="countries"
    [itemTemplate]="itemTemplate"
    [notFoundTemplate]="notFoundTemplate">
</ng-autoplete>

To check the validity On submit button click, have a span that displays the error message and keep it hidden. If the modelvalue is null, then show it

HTML:

<ng-autoplete
    [data]="countries"
    [searchKeyword]="initialValue"
    [initialValue]="initialValue"
    placeHolder="Enter the Country Name"
    (selected)='selectEvent($event)'
    (inputChanged)='onChangeSearch($event)'
    (inputFocused)='onFocused($event)'
    historyIdentifier="countries"
    [itemTemplate]="itemTemplate"
    [notFoundTemplate]="notFoundTemplate">
</ng-autoplete>
    <span class="help-block warning-block" id="invalid-country" *ngIf="showCountryErrorMessage">Please select the country</span>

TS

showCountryErrorMessage:boolean:false

selectEvent(item:any) {
  this.selectedCountry = item
}

onSubmit(){
  if(this.selectedCountry){
     // api call to save data
  } else {
    this.showCountryErrorMessage = true;
  }
}

You can change a Boolean in your selectEvent() which triggers every time an option is selected. I made a StackBlitz example just to clarify, you can play around and make your own behaviour.
EDIT: This StackBlitz with reactive forms as per requested in the ments.

<div class="ng-autoplete">

  <ng-autoplete [data]="data" [searchKeyword]="keyword" (selected)='selectEvent($event)'
      (inputChanged)='onChangeSearch($event)' (inputFocused)='onFocused($event)' [itemTemplate]="itemTemplate"
      [notFoundTemplate]="notFoundTemplate"   formControlName="fname">
  </ng-autoplete>

  <ng-template #itemTemplate let-item>
      <a [innerHTML]="item.name"></a>
  </ng-template>

  <ng-template #notFoundTemplate let-notFound>
      <div [innerHTML]="notFound"></div>
  </ng-template>
</div>

you can use both set value and validation from angular reactive forms i tested it and works just fine

<ng-autoplete>...some props... formControlName="branchAutoComplete" </ng-autoplete>

then use the validators from reactive

this.form = new FormGroup({
  ...
  branchAutoComplete: new FormControl('', Validators.required),
  ...

});

and here you can set your value

this.form.controls['branchAutoComplete'].setValue("someValue");

本文标签： javascriptHow to set initial value and validation to ng autocomplete in Angular 7Stack Overflow