[英]ionic 2 ion-select not sending value to formbuilder
I'm using formbuilder in ionic 2 but facing problems with the ion-select directive when using formControlName with it. 我在ionic 2中使用formbuilder,但在将formControlName与form-ControlName结合使用时遇到离子选择指令的问题。 All the data is being forwarded to firebase where these values are being set. 所有数据都将转发到其中设置了这些值的Firebase。
here's an extract from the 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>
<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>
and here's an extract from the .ts file 这是.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])]
});
Now, the "carModel" and "carYear" are working flawlessly and sending their value when using "formControlName", but "carMake" is giving an error when using "formControlName", the error: 现在,“ carModel”和“ carYear”可以正常使用,并在使用“ 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}
I tried using ngControl instead of formControlName but the values are empty. 我尝试使用ngControl而不是formControlName,但是值是空的。
did anyone else faced problems like this when sing ion-select in ionic 2 formbuilder? 在ionic 2 formbuilder中进行离子选择时,是否还有其他人遇到过这样的问题?
I finally solved the issue i was having between "ion-select" and "formControlName", thanks to http://www.joshmorony.com/advanced-forms-validation-in-ionic-2/ 由于http://www.joshmorony.com/advanced-forms-validation-in-ionic-2/ ,我终于解决了“ ion-select”和“ formControlName”之间的问题。
I saw that the html is a bit different for ion-select, the old html which was causing problems: 我发现html与ion-select有点不同,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>
The new html for ion-select: 用于选择离子的新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>
Now I'm not getting any errors, the selected value is being passed to the database and its working perfectly. 现在,我没有任何错误,所选值正在传递到数据库,并且数据库运行正常。 Once again thanks to http://www.joshmorony.com/advanced-forms-validation-in-ionic-2/ for updating his article 再次感谢http://www.joshmorony.com/advanced-forms-validation-in-ionic-2/更新了他的文章
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.