Question

我正在尝试将表单值作为对象。除了双旋钮范围，我得到了预期的值。任何人都可以指导我如何使用表单控件获得ionic2 dualKnob值。

这是我的HTML代码：

<form [formGroup]="complexForm" (change)="submitForm(complexForm.value)">   
 <div class="form-group">
    <ion-list-header class="search-range">
      <span><strong>Age</strong></span>
      <ion-item>
       <ion-range dualKnobs="true" pin="true" min="0" max="100" debounce="500" [(ngModel)]="ageValue" [ngModelOptions]="{standalone: true}" (ionChange)="onDataChange(complexForm.value)"></ion-range>
       </ion-item>
    </ion-list-header>
     </div>
 </form>

但是，我得到的不是数字＆＃39;我的控制台中的对象为： - 对象{lower：NaN，upper：NaN}

这就是我试图获取表单值的方式

this.complexForm = fb.group({
  'interest': 'Mingle',
  'male': false,
  'female': false,
  'range': this.rangeValue,
  'agerange':  [{lower: this.ageValue, upper: this.ageValue}]
})

Answer 1

我通过以下方式解决了这个问题： -

 <div class="form-group">
    <ion-list-header class="search-range">
      <span><strong>Age</strong></span>
      <ion-item>
        <ion-range dualKnobs="true" pin="true" min="18" max="75" step="3" [(ngModel)]="ageValue" (change)="onDataChange(complexForm.value)" [formControl]="complexForm.controls['agerange']"></ion-range>
       </ion-item>
    </ion-list-header>
     </div>

ageValue: any = { lower: 33, upper: 60 };
constructor( private fb: FormBuilder){
this.complexForm = fb.group({
  'interest': 'Mingle',
  'male': false,
  'female': false,
  'range': this.rangeValue,
  'agerange':   [{lower: this.ageValue, upper: this.ageValue}]
 })
}

Answer 2

我会用

this.complexForm.get（ '形group.ageValue'）。value.lower

在组件中，

{{complexForm.controls.form-group.controls.ageValue._value.lower}}

在模板中。

当然，您不需要[（ngModel）]，只需要formGroup，formGroupName和formControlName。

使用angular2在formcontrol中的Ionic2双旋钮范围值

2 个答案: