2016-11-23 85 views
0

我在離子2中使用formbuilder,但在使用formControlName時遇到離子選擇指令問題。 所有數據都被轉發到firebase,在這些值被設置。離子2離子選擇不發送值formbuilder

這裏是從HTML摘錄

<ion-item fromGroupName="carDetails"> 
      <ion-label floating>car make</ion-label> 
      <ion-select #carMake (change)="elementChanged(carMake)" formControlName="carMake"> 
      <ion-option value="ford" selected>Ford</ion-option> 
      <ion-option value="bmw">BMW</ion-option> 
      <ion-option value="mercedes">Mercedes</ion-option> 
      </ion-select> 
     </ion-item> 

<ion-item formGroupName="carDetails"> 
      <ion-label floating>car model</ion-label> 
      <ion-input #carModel formControlName="carModel" type="text" (change)="elementChanged(carModel)" 
      [class.invalid]="!slideTwoForm.controls.carDetails.controls.carModel.valid && (carModelChanged || submitAttempt)"></ion-input> 
     </ion-item> 
     <ion-item *ngIf="!slideTwoForm.controls.carDetails.controls.carModel.valid && (carModelChanged || submitAttempt)"> 
      <p>Please enter a valid car model.</p> 
     </ion-item> 

<ion-item formGroupName="carDetails"> 
      <ion-label floating>car year</ion-label> 
      <ion-datetime #carYear formControlName="carYear" displayFormat="YYYY" (change)="elementChanged(carYear)" ngControl="carYear"></ion-datetime> 
     </ion-item> 

,這裏是從.TS的提取文件

this.slideTwoForm = formBuilder.group({ 
    ssn: ['', Validators.compose([Validators.maxLength(11), Validators.pattern('[0-9]*'), Validators.required])], 
    drivingCredentials: this.formBuilder.group({ 
     drivingLicense: [''], 
     expirationDate: [''], 
    }), 
    carDetails: this.formBuilder.group({ 
     carMake: [''], 
     carModel: [''], 
     carYear: [''], 
     carColor: [''], 
    }), 
    password: ['', Validators.compose([Validators.minLength(6), Validators.required])] 
    }); 

現在,「carModel」和「carYear」的工作完美無缺,並把他們的價值當使用「formControlName」,但「carMake」在使用「formControlName」時發生錯誤時,錯誤:

polyfills.js:3 Uncaught ViewWrappedError {_nativeError: Error: Error in ./SignUpPage class SignUpPage - inline template:134:70 caused by: Cannot find contro…, originalError: Error: Cannot find control with name: 'carMake' 
at _throwError (http://localhost:8100/build/main…, context: DebugContext} 

我嘗試使用ngControl而不是formControlName,但值是空的。

enter image description here

離子2 formbuilder唱離子選擇什麼時候任何人都遇到過這樣的問題呢?

回答

-1

我終於解開了我是「離子選擇」和「formControlName」,感謝之間遇到的問題,以http://www.joshmorony.com/advanced-forms-validation-in-ionic-2/

我看到HTML是離子選擇有點不同,老的HTML這是造成問題:

<ion-item fromGroupName="carDetails"> 
     <ion-label floating>car make</ion-label> 
     <ion-select #carMake (change)="elementChanged(carMake)" formControlName="carMake"> 
     <ion-option value="ford" selected>Ford</ion-option> 
     <ion-option value="bmw">BMW</ion-option> 
     <ion-option value="mercedes">Mercedes</ion-option> 
     </ion-select> 
    </ion-item> 

的離子選擇新的HTML:

<ion-item formGroupName="carDetails"> 
      <ion-label floating>car make</ion-label> 
      <ion-select [class.invalid]="!slideTwoForm.controls.carDetails.controls.carMake.valid 
      && (slideTwoForm.controls.carDetails.controls.carMake.dirty || submitAttempt)" formControlName="carMake"> 
      <ion-option value="ford" selected>Ford</ion-option> 
      <ion-option value="bmw">BMW</ion-option> 
      <ion-option value="mercedes">Mercedes</ion-option> 
      </ion-select> 
     </ion-item> 

現在我沒有得到任何錯誤,所選擇的值被傳遞到數據庫,它的工作完美。再次感謝http://www.joshmorony.com/advanced-forms-validation-in-ionic-2/更新他的文章