Question

我试图将国家/地区数据绑定到注册表单内的select选项中，但是绑定后select完全消失了。这是代码：

数据模型

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"
    },
]

我剪切了整个数据，因为在这里显示太长了。但是看起来像这样。

打字稿

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,
         ]),
    });
}

我认为TypeScript应该有错误。这也是HTML部分：

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>

怎么了？为什么Select完全消失而绑定不起作用？怎么解决？

Answer 1

您必须重复option标签，而不是select标签：

<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>

此致

Answer 2

您应该在 HTML 中使用ngDefaultControl。另外，请将其包含在 TypeScript 中：countries:Countries[]=country;

这是您的代码的外观：

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>

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

2 个答案: