Select is not displaying at all after binding data on it in Angular

Question

I am trying to bind countries data into select option inside the sign-up form but after binding select disappeared completely. Here is the code:

data model

export class Countries {
    public name: string;
    public code: string;

    constructor(name: string, code: string) {
      this.name = name;
      this.code = code;

    }
  }


  export const country: Countries [] = [
    {
        "name": "United States",
        "code": "US"
    },
    {
        "name": "Netherlands",
        "code": "NL"
    },
    {
        "name": "United Kingdom",
        "code": "UK"
    },
]

I cut the whole data because it's too long for showing here. But it looks like this.

Typescript

import {country} from "../../models/countries.model"

...
export class SignupComponent implements OnInit {
country[];
 SignupForm: FormGroup;
...
ngOnInit() {
 this.nav.hide(); 
 this.SignupForm = new FormGroup({
       'username': new FormControl(null, [Validators.required,
      Validators.pattern('(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])'),
       ]),
      'password': new FormControl(null, [Validators.required,
      Validators.pattern('(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[$@$!%*?&])[A-Za-z\d$@$!%*?&].{8,}'),
       ]),
       'country': new FormControl([Validators.required,
         ]),
    });
}

I assume mistake should be in the TypeScript. Also here is the HTML part:

HTML

  <div class="form-group form-signup">
      <input class="form-control form-control-lg" placeholder="Password" type="password" formControlName="password"/>
      <span *ngIf="!SignupForm.get('password').valid && SignupForm.get('password').touched" class="help-block">Please enter a valid password!</span>
  </div>
  <div class="form-group form-signup">
        <select class="form-control form-control-lg" *ngFor="let countries of country" [value]="countries.name" formControlName="country">
                <option value="">--Please choose an option--</option>
            <option>   {{ countries.name }}
        </option>
        </select>
        <span *ngIf="!SignupForm.get('country').valid && SignupForm.get('country').touched" class="help-block">Please enter a country!</span>
  </div>

What is wrong? Why Select is disappeared completely and binding is not working? How can it be solved?

Mohamed Ali RACHID · Accepted Answer · 2018-11-07 09:50:17Z

2

you have to repeat option tag and not select tag :

<select class="form-control form-control-lg">
       <option value="">--Please choose an option--</option>
       <option  *ngFor="let countries of country" [value]="countries.name" formControlName="country">  {{ countries.name }}  </option>
</select>

Regards,

answered Nov 7, 2018 at 9:50

Mohamed Ali RACHID

3,31713 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

user8978302 Over a year ago

Thanks for replying. Select appeared but data is not displaying in it. Seems the problem is with TypeScript. I've imported country from data model but in VS it shows passive which means it was imported but was not used.

Mohamed Ali RACHID Over a year ago

the data is empty because you did not set its value when creating the FormControl , you have to set the value like this , 'country': new FormControl(countyValue, [Validators.required, ])

user8978302 Over a year ago

countryValue is undefined :( it also shows a red line under country [] under the signup class

Mohamed Ali RACHID Over a year ago

countryValue is just an example .. where is stored the list of your countries ? if it is stored in country variable , then you should create your FormControl as below : 'country': new FormControl(country, [Validators.required, ])

user8978302 Over a year ago

Error disappeared but data is not appearing in select again :( Something strange is happening here.

|

user9187519 · Accepted Answer · 2018-11-09 17:18:36Z

You should use ngDefaultControl in HTML. Also, include this in TypeScript: countries:Countries[]=country;

here is how should look like your code:

TypeScript

import {country, countries} from "../../models/countries.model"

...

export class SignupComponent implements OnInit {
country[];
 SignupForm: FormGroup;
countries:Countries[]=country;

...

ngOnInit() {
 this.nav.hide(); 
 this.SignupForm = new FormGroup({

       ...

       'country': new FormControl(this.countries[0], [Validators.required, ]),
         ]),
    });
}

HTML

<div class="form-group form-signup">
        <select class="form-control form-control-lg">
            ...
            <option ngDefaultControl [ngValue]="country" *ngFor="let country of countries" formControlName="country">{{country.name}}</option>
     </select>
      </div>

Collectives™ on Stack Overflow

Select is not displaying at all after binding data on it in Angular

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related