Question

我在离子2中使用formbuilder但在使用formControlName时遇到了离子选择指令的问题。所有数据都被转发到firebase，其中设置了这些值。

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

现在，＆＃34; carModel＆＃34;和＆＃34; carYear＆＃34;在使用＆＃34; formControlName＆＃34;时，它们正在完美地工作并发送它们的价值，但是＆＃34; carMake＆＃34;使用＆＃34; formControlName＆＃34;时出错，错误：

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中的离子选择时，是否有其他人遇到过这样的问题？

Answer 1

我终于解决了我在＆＃34; ion-select＆＃34;之间的问题。和＃34; formControlName＆＃34;，感谢http://www.joshmorony.com/advanced-forms-validation-in-ionic-2/

我看到html与ion-select有点不同，旧的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发送值

1 个答案: