选择不会更新Angular 6中的用户信息

Question

我们有一个用户编辑配置文件表单，用于更改该用户的现有信息并单击更新。问题是简单的输入正在更新用户信息，但选择不。这是代码：

TS

 private populateForm() {
    const unusedFields = [
      '_id',
      '__v',
      'username',
      'email',
    ];

    const userInfo = Object.assign({}, this.user);
    unusedFields.forEach((field) => delete userInfo[field]);
    this.SettingsForm.setValue(userInfo);
  }

  private buildSettingsForm() {
    this.SettingsForm = this.fb.group({
      country: [null, [Validators.required, Validators.pattern('[a-zA-Z ]*')]],
      firstName: [null, [Validators.required, Validators.pattern('[a-zA-Z ]*')]],
      gender: [null, [Validators.required]],
      jobTitle: [null, [Validators.required]],
      lastName: [null, [Validators.required, Validators.pattern('[a-zA-Z ]*')]],
      description:[null, [Validators.required]],
    });
    this.SettingsForm.setValidators(this.minimumAge(18));
  }

  UpdateUser() {
    this.usersService.EditUser(this.SettingsForm.value).subscribe(
      data => {
        this.router.navigate(['home']);
      },
      err => console.log(err)
    );
}

HTML

 <form action="" [formGroup]="SettingsForm" (ngSubmit)="UpdateUser()">
...
...
  <div class="col-md-6">
            <div class="form-group form-signup">
                <input class="form-control form-control-lg" placeholder="lastName" type="text" id="lastName"
                    formControlName="lastName" />
                <span *ngIf="!SettingsForm.get('lastName').valid && SettingsForm.get('lastName').touched"
                    class="help-block">Please enter a valid username!</span>
            </div>
        </div>
    </div> 
    <div class="row">
        <div class="form-group form-signup col-md-6">
            <select class="form-control form-control-lg">
                <option value="">{{user.country}}</option>
                <option ngDefaultControl [ngValue]="country.name" *ngFor="let country of countries"
                    formControlName="country">{{country.name}}</option> 
            </select>
            <span *ngIf="!SettingsForm.get('country').valid && SettingsForm.get('country').touched"
                class="help-block">Please enter a country!</span>
        </div>

...
...
</form>

如您所见，第二个是选择的国家/地区以及您更改的内容，它不会在刷新页面后更新该值，它会获得与之前相同的值。此问题仅在选择时发生。所以问题是在Angular方面而不是在后端，因为其他输入正在更新值。有什么问题，我们如何解决？

Answer 1

将formControlName="country"设置为select标签而不是option ..更改此代码，

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