2016-11-23 2 views
0

私はイオン2ではformbuilderを使用していますが、formControlNameを使用するときはイオン選択ディレクティブに問題があります。 すべてのデータは、これらの値が設定されているfirebaseに転送されています。ここ ionic 2 ion-select formbuilderに値を送信しません

は完璧に働いて、その値を送信している

<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> 

、ここでは、今すぐ「carModel」と「carYear」

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])] 
    }); 

ファイル.TSからの抽出物のHTMLからの抜粋です「formControlName」を使用しているときに「formControlName」を使用しているときに「carMake」がエラーを出しているときは、エラー:

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} 

私はformControlNameの代わりにngControlを使用しようとしましたが、値は空です。イオン2 formbuilderにイオン選択歌うとき

enter image description here

は、誰がこのような問題に直面したのですか?

答えて

-1

私は最終的にhttp://www.joshmorony.com/advanced-forms-validation-in-ionic-2/

のおかげで、私はHTMLが原因となったイオン選択、古いhtmlのために少し異なっていることを見て、私は「イオン選択」と「formControlName」の間で持っていた問題を解決しました問題:

<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/のおかげで

関連する問題