将数据绑定到Angular中后，Select根本不显示

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?

Answer 1

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,

Answer 2

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>