Question

我正在使用Angular 2 beta.9制作表单 - 遵循指南使用ngControl制作模型驱动的样式表单，而不是ngModel。输入标签使用ngControl和捕获数据。选择标签显示选项并单击选择，但不将该数据捕获到ngControl中。我尝试了很多变体，比如裸选择标签，材料设计选择，验证，无验证等。输入日志，但没有选择数据记录到ngControl。 select标签应该改变什么？

HTML - 国家和州是相同的结构

<form [ngFormModel]="residenceForm" (ngSubmit)="onSubmit(residenceForm.value)" #apartmentRentalForm="ngForm">
   <md-input-container class="md-block" flex-gt-sm="25">
      <label for="country">COUNTRY</label>
         <select [(value)]="residenceForm.country" #country="ngForm" [ngFormControl]="residenceForm.controls['country']">
            <option *ngFor="#country of countries" [value]="country.name">
              {{country.name}}
            </option>
         </select>
   </md-input-container>

Angular 2 Component

export class PostApartment4Rent {
  submitted = false;
  residenceForm: ControlGroup;

  constructor(fb: FormBuilder) {
    this.residenceForm = fb.group({
      'country': ['', Validators.required],
      'state': ['']
  });
  onSubmit(value: any): void {
    console.log('you submitted: ', value); //inputs show; no select data shows in log
  }
} //end of export class

Answer 1

我通过在FormBuilder文档中对此进行模式化来实现此目的。基本上匹配ngControls的{{1}}绑定。

ControlGroup

这是完整的Plunker example。

Angular 2表单不会将选择标记数据注册/捕获到ngControl

1 个答案: