离子2离子选择不发送值formbuilder

问题描述：

我在离子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，但值是空的。

离子2 formbuilder唱离子选择什么时候任何人都遇到过这样的问题呢？

答

我终于解开了我是“离子选择”和“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/更新他的文章

离子2离子选择不发送值formbuilder

相关推荐