使用angular2的formcontrol內的Ionic2雙旋鈕范圍值

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>

但是，我在控制台中得到了“不是數字”的對象：- Object {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('form-group.ageValue').value.lower

在組件中，和

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

在模板中。

而且您當然不需要 [(ngModel)]，只需要 formGroup、formGroupName 和 formControlName。