使用 angular2 的表单控件内的 Ionic2 双旋钮范围值

Question

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

这是我的 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>

但是，我在控制台中得到"不是数字"对象：- 对象 {下：NaN，上：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（'form-group.ageValue'）.value.lower

在组件中，以及

{

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

在模板中。

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