ionic 2 ion-select sendet keinen Wert an formbuilder

Ich benutze formbuilder in ionic 2, habe aber Probleme mit der ion-select-Direktive, wenn ich formControlName damit verwende. Alle Daten werden an Firebase weitergeleitet, wo diese Werte festgelegt werden.ionic 2 ion-select sendet keinen Wert an formbuilder

hier ist ein Auszug aus dem 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>

und hier ist ein Auszug aus dem .ts Jetzt

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

Datei, die „carmodel“ und „carYear“ arbeiten einwandfrei und ihren Wert zu senden bei der Verwendung von "formControlName", sondern "carMake" einen Fehler geben, wenn "formControlName" verwenden, wird der Fehler:

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}

Ich habe versucht, ngControl anstelle von formControlName zu verwenden, aber die Werte sind leer.

hat jeder andere Probleme wie diese konfrontiert, wenn Ion-select in ionischen 2 Formbuilder singen?

Quelle

2016-11-23 anas munir

-1

Ich löste schließlich das Problem i zwischen „ion-select“ wurde und mit „formControlName“ dank http://www.joshmorony.com/advanced-forms-validation-in-ionic-2/

ich sah, dass der HTML-Code für Ion-select ein bisschen anders ist, die alte html, das verursacht wurde Probleme:

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

der neue hTML-Code für Ion-select:

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

jetzt keine Fehler ich erhalte, wird der ausgewählte Wert in die Datenbank übergeben wird und es funktioniert perfekt. Nochmals vielen Dank an http://www.joshmorony.com/advanced-forms-validation-in-ionic-2/ für die Aktualisierung seines Artikels

Quelle

2016-11-23 19:51:03

ionic 2 ion-select sendet keinen Wert an formbuilder

Antwort

Verwandte Themen