首页 文章

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

提问于
浏览 次
1

我正在使用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>

角度2分量

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
html forms angular

1 回答

  • 1

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

    <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 ngControl='country'>
        <option *ngFor="#countryItem of countries">
          {{countryItem.name}}
        </option>
      </select>
    </md-input-container>
    
     Selected: {{residenceForm.value | json}}
</form>

    这是完整的Plunker example .

    回复于

相关问题