title: How do I show json data into p-dropdown and p-autocomplete?
body: <p>My question is How do I show json data into p-dropdown and p-autocomplete?My json data for p-dropdown is </p>
  
  <pre><code>{{ this.address.AddressType }} 
  </code></pre>
  
  <p>and for p-autocomplete is </p>
  
  <pre><code>{{ this.address.State }},
  {{ this.address.City }},
  {{ this.address.Country }}
  </code></pre>
  
  <p>It works for p-Input text field by using value property.I dont know how to show value in p-autocomplete and p-dropdown because(I am using this format for updating and display data in same input fields)
  My second question is I have commented validation section it gives me error for validating formcontrolname it says property is not defined eg.for fist dropdown
  addresstype is not defined(property is not defined)</p>
  
  <p>contact.component.html</p>
  
  <pre><code>&lt;p-growl [value]="msgs" sticky="sticky"&gt;&lt;/p-growl&gt;
  
  &lt;form [formGroup]="address" (ngSubmit)="onSubmit(address.value)"&gt;
  
  &lt;p-dataList [value]="addresses"&gt;
          &lt;p-header&gt;
                      Addresses
          &lt;/p-header&gt;
  
          &lt;ng-template let-address let-i="index" pTemplate="item"&gt;
  
  &lt;div class="ui-fluid"&gt;
  
  &lt;div class="ui-inputgroup"&gt; 
  
              &lt;label for="email" class="ui-md-2 control-label"&gt;Address Type&lt;/label&gt;
  
                  &lt;div class="ui-md-6"&gt;
                      &lt;div class="ui-inputgroup"&gt;
                          &lt;p-dropdown [options]="AddressTypes"  name="something" formControlName="addresstype" [(ngModel)]="selectedvalidid6" [style]="{'width':'160px'}" filter="true" name="something" placeholder="Address Types"&gt;
                                  &lt;ng-template let-item pTemplate="selectedItem"&gt;
  
                                      &lt;span style="vertical-align:middle"&gt;{{ item.label }}&lt;/span&gt;
                                  &lt;/ng-template&gt;
                                  &lt;ng-template let-AddressType pTemplate="item"&gt;
                                      &lt;div class="ui-helper-clearfix" style="position: relative;height: 26px;"&gt;
  
                                          &lt;div style="font-size:14px;float:right;margin-top:4px"&gt;{{ AddressType.label }}&lt;/div&gt;
                                      &lt;/div&gt;
                                  &lt;/ng-template&gt;
                              &lt;/p-dropdown&gt;
  
                      &lt;/div&gt;
  
                  &lt;/div&gt;
  
                  &lt;div class="ui-md-4"&gt;     
                          &lt;!--&lt;div class="ui-message ui-messages-error ui-corner-all" *ngIf="!address.controls['addresstype'].valid&amp;&amp;address.controls['addresstype'].dirty"&gt;
                              &lt;i class="fa fa-close"&gt;&lt;/i&gt;
                              addresstype is required
                          &lt;/div&gt;--&gt;
                  &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="ui-inputgroup"&gt; 
  
                  &lt;label for="email" class="ui-md-2 control-label"&gt;Address L1&lt;/label&gt;
  
                      &lt;div class="ui-md-6"&gt;
                          &lt;div class="ui-inputgroup"&gt;
                              &lt;input type="text" pInputText pKeyFilter="alphanum" formControlName="addressl1" name="something" value="{{ this.address.AddressL1 }}" placeholder="Address L1"&gt; 
                          &lt;/div&gt;
                      &lt;/div&gt;
  
                      &lt;div class="ui-md-4"&gt;     
                              &lt;!--&lt;div class="ui-message ui-messages-error ui-corner-all" *ngIf="!address.controls['addressl1'].valid&amp;&amp;address.controls['addressl1'].dirty"&gt;
                                  &lt;i class="fa fa-close"&gt;&lt;/i&gt;
                                  addressl1 is required
                              &lt;/div&gt;--&gt;
                      &lt;/div&gt;
      &lt;/div&gt;
  
   &lt;div class="ui-inputgroup"&gt; 
  
              &lt;label for="email" class="ui-md-2 control-label"&gt;Address L2&lt;/label&gt;
  
                  &lt;div class="ui-md-6"&gt;
                      &lt;div class="ui-inputgroup"&gt;
                          &lt;input type="text" pInputText pKeyFilter="alphanum" name="something" formControlName="addressl2" value="{{ this.address.AddressL2 }}" placeholder="Address L2"&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;div class="ui-md-4"&gt;     
                       &lt;!--   &lt;div class="ui-message ui-messages-error ui-corner-all" *ngIf="!address.controls['addressl2'].valid&amp;&amp;address.controls['addressl2'].dirty"&gt;
                              &lt;i class="fa fa-close"&gt;&lt;/i&gt;
                              addressl2 is required
                          &lt;/div&gt;--&gt;
                  &lt;/div&gt;
      &lt;/div&gt;
  
  
      &lt;div class="ui-inputgroup"&gt; 
  
              &lt;label for="password" class="ui-md-2 control-label"&gt;State&lt;/label&gt;
  
                  &lt;div class="ui-md-6"&gt;
                      &lt;div class="ui-inputgroup"&gt;
                          &lt;p-autoComplete [(ngModel)]="state" [suggestions]="filteredStatesSingle" formControlName="state" (completeMethod)="filterStateSingle($event)" field="{{this.address.State}}" [size]="auto"
                          placeholder="State"  [minLength]="1" name="something"&gt;
  
  
                      &lt;/p-autoComplete&gt;                    
  
  
                      &lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;div class="ui-md-4"&gt;     
                      &lt;!--    &lt;div class="ui-message ui-messages-error ui-corner-all" *ngIf="!address.controls['state'].valid&amp;&amp;address.controls['state'].dirty"&gt;
                              &lt;i class="fa fa-close"&gt;&lt;/i&gt;
                          State is required
                          &lt;/div&gt;--&gt;
                  &lt;/div &gt;
      &lt;/div&gt;
  
      &lt;div class="ui-inputgroup"&gt; 
  
                  &lt;label for="password" class="ui-md-2 control-label"&gt;Locality&lt;/label&gt;
  
                      &lt;div class="ui-md-6"&gt;
                          &lt;div class="ui-inputgroup"&gt;
                              &lt;input type="text" pInputText pKeyFilter="alpha" name="something" formControlName="locality" value="{{ this.address.Locality }}" placeholder="Locality"&gt;
  
                          &lt;/div&gt;
                      &lt;/div&gt;
  
                      &lt;div class="ui-md-4"&gt;     
                           &lt;!--   &lt;div class="ui-message ui-messages-error ui-corner-all" *ngIf="!address.controls['locality'].valid&amp;&amp;address.controls['locality'].dirty"&gt;
                                  &lt;i class="fa fa-close"&gt;&lt;/i&gt;
                              Locality is required
                              &lt;/div&gt;--&gt;
                      &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="ui-inputgroup"&gt; 
  
              &lt;label for="password" class="ui-md-2 control-label"&gt;City&lt;/label&gt;
  
                  &lt;div class="ui-md-6"&gt;
                      &lt;div class="ui-inputgroup"&gt;
                          &lt;p-autoComplete [(ngModel)]="city" [suggestions]="filteredCitiesSingle" formControlName="city" (completeMethod)="filterCitySingle($event)" field="city" [size]="auto"
                          placeholder="City" [minLength]="1"  name="something"&gt;&lt;/p-autoComplete&gt;                    
  
                      &lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;div class="ui-md-4"&gt;     
                      &lt;!--    &lt;div class="ui-message ui-messages-error ui-corner-all" *ngIf="!address.controls['city'].valid&amp;&amp;address.controls['city'].dirty"&gt;
                              &lt;i class="fa fa-close"&gt;&lt;/i&gt;
                          City is required
                          &lt;/div&gt;--&gt;
                  &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="ui-inputgroup"&gt; 
  
              &lt;label for="password" class="ui-md-2 control-label"&gt;Country&lt;/label&gt;
  
                  &lt;div class="ui-md-6"&gt;
  
                               &lt;p-autoComplete [(ngModel)]="country" [suggestions]="filteredCountriesSingle" formControlName="country" (completeMethod)="filterCountrySingle($event)" field="country" [size]="auto"
                              placeholder="Country" [minLength]="1"  name="something"&gt;&lt;/p-autoComplete&gt;                    
                              &lt;span style="margin-left:10px"&gt;Country: {{country ? country.country||country : 'none'}}&lt;/span&gt;
  
  
                  &lt;/div&gt;
  
                  &lt;div class="ui-md-4"&gt;     
                   &lt;!--   &lt;div class="ui-message ui-messages-error ui-corner-all" *ngIf="!address.controls['country'].valid&amp;&amp;address.controls['country'].dirty"&gt;
                              &lt;i class="fa fa-close"&gt;&lt;/i&gt;
                              country is required
                          &lt;/div&gt;--&gt;
                  &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="ui-inputgroup"&gt; 
  
              &lt;label for="password" class="ui-md-2 control-label"&gt;Postal Code&lt;/label&gt;
  
                  &lt;div class="ui-md-6"&gt;
                      &lt;div class="ui-inputgroup"&gt;
                          &lt;input type="text" pInputText pKeyFilter="num" name="something" formControlName="postalcode" value="{{ this.address.Postalcode }}" placeholder="Postal Code"&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;div class="ui-md-4"&gt;     
                      &lt;!--    &lt;div class="ui-message ui-messages-error ui-corner-all" *ngIf="!address.controls['postalcode'].valid&amp;&amp;address.controls['postalcode'].dirty"&gt;
                              &lt;i class="fa fa-close"&gt;&lt;/i&gt;
                              postalcode is required
                          &lt;/div&gt;--&gt;
                  &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="ui-inputgroup"&gt;
              &lt;div class="ui-md-8 ui-md-offset-4"&gt;
  
       &lt;button pButton type="submit" label="Submit" [disabled]="!address.valid"&gt;&lt;/button&gt;
          &lt;button pButton type="button" (click)="count()" name="something" label="Add Another"&gt;&lt;/button&gt;
          &lt;button pButton type="button" (click)="count()" label="Cancel"&gt;&lt;/button&gt;
  
      &lt;/div&gt;
  &lt;/div&gt; 
  &lt;/div&gt;
  &lt;/ng-template&gt;
  &lt;/p-dataList&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>person.json</p>
  
  <pre><code>{
  "Addresses": [{ 
  
              "AddressId":101,
              "AddressType":"Permanent",
              "AddressL1":"Mind space", 
              "AddressL2":"A.b.road",
              "Locality":"Airoli(east)",
              "City":"Mumbai", 
              "State":"Maharashtra",
              "Country":"India",
              "Postalcode":400011
           },
           { 
  
                  "AddressId":102,
                  "AddressType":"Permanent",
                  "AddressL1":"Mind space1", 
                  "AddressL2":"N.m.road",
                  "Locality":"Pune(west)",
                  "City":"Pune", 
                  "State":"Maharashtra",
                  "Country":"India",
                  "Postalcode":400012
               }]
  }
  </code></pre>
  
  <p>contact.component.ts</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import * as jwt from 'angular2-jwt/angular2-jwt';
  import { CardModule } from 'primeng/card';
  import { CalendarModule } from 'primeng/calendar';
  import { ScrollPanelModule } from 'primeng/scrollpanel';
  import { Response } from '@angular/http/src/static_response';
  import { SelectItem } from 'primeng/api';
  import { CountryService } from './country-list.service';
  import { StateService } from './state-list.service';
  import { CityService } from './city-list.service';
  import { Console } from '@angular/core/src/console';
  import { Message } from 'primeng/components/common/api';
  import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms';
  import { PersonListService,Person, Address, Email, ContactNumber} from './person-list.service';
  import {DataListModule} from 'primeng/datalist';
  
  @Component({ 
    moduleId: module.id,
    selector: 'sd-contactform',
    templateUrl: 'contactform.component.html',
    styleUrls: ['contactform.component.css']
  })
  export class ContactFormComponent implements OnInit {
  
  errorMessage: any;
  
  addresses: Address[];
  
  emails:Email[];
  
  contactnumbers:ContactNumber[];
  
    date3: Date;
  
    dates: Date[];
  
    rangeDates: Date[];
  
    minDate: Date;
  
    maxDate: Date;
  
    es: any;
  
    invalidDates: Array&lt;Date&gt;;
  
    val2: string = 'Male';
  
    val3: string = 'Unmarried';
  
    text: string;
  
    ValidIds: SelectItem[];
  
    selectedvalidid2: string = '';
  
    Religions: SelectItem[];
  
    selectedvalidid3: string = '';
  
    BloodGroups: SelectItem[];
  
  
    selectedvalidid4: string = '';
  
    AddressTypes: SelectItem[];
  
    selectedvalidid5: string = '';
  
    EmailTypes: SelectItem[];
  
    selectedvalidid6: string = '';
  
    ContactTypes: SelectItem[];
  
    selectedvalidid7: string = '';
  
    country: any;
  
    filteredCountriesSingle: any[];
  
    state: any;
  
    filteredStatesSingle: any[];
  
    city: any;
  
    filteredCitiesSingle: any[];
  
    msgs: Message[] = [];
  
    address: FormGroup;
  
    email: FormGroup;
  
    contact: FormGroup;
  
    submitted: boolean;
  
    constructor(public personListService:PersonListService,private countryService: CountryService,private stateService: StateService,private cityService: CityService,private fb: FormBuilder) { }
  
  
  
    filterCountrySingle(event) {
        let query = event.query;
        this.countryService.getCountries().then(countries =&gt; {
            this.filteredCountriesSingle = this.filterCountry(query, countries);
        });
    }
  
    filterCountry(query, countries: any[]):any[] {
      //in a real application, make a request to a remote url with the query and return filtered results, for demo we filter at client side
      let filtered : any[] = [];
      for(let i = 0; i &lt; countries.length; i++) {
          let country = countries[i];
          if(country.country.toLowerCase().indexOf(query.toLowerCase()) == 0) {
              filtered.push(country);
          }
      }
      return filtered;
  }
  
  filterStateSingle(event) {
      let query = event.query;
      this.stateService.getStates().then(states =&gt; {
          this.filteredStatesSingle = this.filterState(query,states);
      });
  }
  
  filterState(query,states: any[]):any[] {
    //in a real application, make a request to a remote url with the query and return filtered results, for demo we filter at client side
    let filtered : any[] = [];
    for(let i = 0; i &lt; states.length; i++) {
        let state = states[i];
        if(state.state.toLowerCase().indexOf(query.toLowerCase()) == 0) {
            filtered.push(state);
        }
    }
    return filtered;
  }
  
  
  filterCitySingle(event) {
      let query = event.query; 
      this.cityService.getCitys().then(cities =&gt; {
          this.filteredCitiesSingle = this.filterCity(query,cities);
      });
  }
  
  filterCity(query,cities: any[]):any[] {
    //in a real application, make a request to a remote url with the query and return filtered results, for demo we filter at client side
    let filtered : any[] = [];
    for(let i = 0; i &lt; cities.length; i++) {
        let city = cities[i];
        if(city.city.toLowerCase().indexOf(query.toLowerCase()) == 0) {
          console.log(city);
  
            filtered.push(city);
  
        }
    }
    return filtered;
  }
  
  
    ngOnInit() {
  
      this.getperson();
  
      this.address = this.fb.group({
          'addresstype': new FormControl('', Validators.required),
          'addressl1': new FormControl('', Validators.required),
          'addressl2': new FormControl('', Validators.required),
          'state': new FormControl('', Validators.required),
          'locality': new FormControl('', Validators.required),
          'city': new FormControl('', Validators.required),
          'country': new FormControl('', Validators.required),
          'postalcode': new FormControl('', Validators.required)
  
  
      }
  );
  
  this.email = this.fb.group({
      'emailtype': new FormControl('', Validators.required),
      'emailid': new FormControl('', [Validators.required,
      Validators.pattern("[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$")] )
  }
  );
  
      this.contact = this.fb.group({
          'contacttype': new FormControl('', Validators.required),
          'countrycode': new FormControl('', Validators.required),
          'regioncode': new FormControl('', Validators.required),
          'mobileno': new FormControl('', [Validators.required,Validators.minLength(10),Validators.maxLength(10)]),
          'landlineno': new FormControl('',[Validators.required,Validators.minLength(8),Validators.maxLength(8)])
      }
  );
      this.AddressTypes = [
        {label: 'Native', value: 'Native'},
        {label: 'Temporary', value: 'Temporary'},
        {label: 'Permanent', value: 'Permanent'},
        {label: 'Careof', value: 'Careof'},
  
    ];
  
    this.EmailTypes = [
      {label: 'Personal', value: 'Personal'},
      {label: 'Office', value: 'Office'},
  
  ];
  
  this.ContactTypes = [
    {label: 'Home', value: 'Home'},
    {label: 'Office', value: 'Office'},
  ];
  
         this.es = {
              firstDayOfWeek: 1,
              dayNames: [ 'domingo','lunes','martes','miércoles','jueves','viernes','sábado' ],
              dayNamesShort: [ 'dom','lun','mar','mié','jue','vie','sáb' ],
              dayNamesMin: [ 'D','L','M','X','J','V','S' ],
              monthNames: [ 'enero','febrero','marzo','abril','mayo','junio','julio','agosto','septiembre','octubre','noviembre','diciembre' ],
              monthNamesShort: [ 'ene','feb','mar','abr','may','jun','jul','ago','sep','oct','nov','dic' ],
              today: 'Hoy',
              clear: 'Borrar'
          }
  
  
          let today = new Date();
          let month = today.getMonth();
          let year = today.getFullYear();
          let prevMonth = (month === 0) ? 11 : month -1;
          let prevYear = (prevMonth === 11) ? year - 1 : year;
          let nextMonth = (month === 11) ? 0 : month + 1;
          let nextYear = (nextMonth === 0) ? year + 1 : year;
  
  
          let invalidDate = new Date();
          invalidDate.setDate(today.getDate() - 1);
          this.invalidDates = [today,invalidDate];
      }
  
      onSubmit(value: string) {
          this.submitted = true;
          this.msgs = [];
          this.msgs.push({severity:'info', summary:'Success', detail:'Form Submitted'});
      }
  
      getperson(){
  
          this.personListService.getAddress()
           .subscribe(
            resp =&gt; this.addresses = resp.Addresses,
  
             //resp =&gt; this.addresses = resp.Addresses,
             error =&gt; this.errorMessage = &lt;any&gt;error
           );
          this.personListService.getEmail()
           .subscribe(
            resp =&gt; this.emails = resp.Emails,
  
             //resp =&gt; this.addresses = resp.Addresses,
             error =&gt; this.errorMessage = &lt;any&gt;error
           );
           this.personListService.getContact()
           .subscribe(
            resp =&gt; this.contactnumbers = resp.ContactNumbers,
  
             //resp =&gt; this.addresses = resp.Addresses,
             error =&gt; this.errorMessage = &lt;any&gt;error
           ); 
         }
      }
  </code></pre>