如何使用 html select 处理反应式表单？

Question

我有一个这样的模板：

<form [formGroup]="form">
   <mdl-textfield type="text" #userFirstName name="lastName"
              label="{{'FIRSTNAME' | translate}}" pattern="[A-Z,a-zéè]*"
              error-msg="{{'FIRSTNAME' | translate}}" floating-label
              formControlName="firstName">
  </mdl-textfield>
  <mdl-textfield type="text" #userLastName name="firstName" pattern="[A-Z,a-z,éè]*"
             label="{{'LASTNAME' | translate}}"                       
             error-msg="{{'LASTNAME' | translate}}" floating-label                                                          
             formControlName="lastName">
  </mdl-textfield>
  <mdl-textfield type="text" name="town" #userTown label="{{'TOWN' | translate}}"
                pattern="[A-Z,a-z,éè]*"
                error-msg="{{'TOWN' | translate}}" floating-label
                formControlName="town">
  </mdl-textfield>
  <div class="mdl-textfield mdl-js-textfield"> {{ 'COUNTRY' | translate }}
   <select name="country">
     <option *ngFor="let country of countries" [ngValue]="country"          
         [selected]="country.id" 
         formControlName="countryId" ngDefaultControl>{{country.countryName}}
     </option>
   </select>
  </div>
  <mdl-card-actions>
    <button (click)="modifyClient()" [disabled]="!form.valid" 
         class="mdl-button mdl-button--raised mdl-button--accent">  
         {{'MODIFY' | translate}}
    </button>
  </mdl-card-actions>
 </form>

带有文本字段和选择。实际上我有 2 个选择，但为了缩短代码，我在这里取消了一个。

我的组件是：

public form: FormGroup;
    public countries;
    public languages;
    private id;
    private user: Client = new Client();
    public firstName = new FormControl('');
    public lastName = new FormControl('');
    public town = new FormControl('');
    public company = new FormControl('');
    public countryId = new FormControl('');
    public languageId = new FormControl('');
 ngOnInit()
    {
        this.getCountries();
        this.getLanguages();
        this.id = this.clientApi.getCachedCurrent().id;
        this.form = this.fb.group({
            'firstName': this.clientApi.getCachedCurrent().firstName,
            'lastName': this.clientApi.getCachedCurrent().lastName,
            'town': this.clientApi.getCachedCurrent().town,
            'company': this.clientApi.getCachedCurrent().company,
            'countryId': this.clientApi.getCachedCurrent().countryId,
            'languageId': this.clientApi.getCachedCurrent().languageId
            });
        this.form.valueChanges
            .map((formValues) => {
                formValues.firstName = formValues.firstName.toUpperCase();
                return formValues;
            })
            // .filter((formValues) => this.form.valid)
            .subscribe((formValues) => {
                console.log(`Model Driven Form valid: ${this.form.valid} value:`, JSON.stringify(formValues));
            });
    }

所以这里一切正常，信息来自后端，效果很好。 当我更改文本字段上的值时，会调用 this.form.valueChanges 并将 formValues 写入控制台。 我的问题是选择标签。如果我在默认情况下选择另一个，则表单没有变化，并且 this.form.valueChanges 不会被调用...

知道如何解决这个问题吗？

感谢和问候，

Answer 1

formControlName 应该在 <select> 上，但你在 <option> 上拥有它。