离子2离子选择不发送给环境的价值 [英] ionic 2 ion-select not sending value to formbuilder
问题描述
所有数据都被转发到firebase,在这些值被设置。
这里是摘录从HTML
< ion-item fromGroupName =carDetails>
<离子标签浮动>汽车制造< /离子标签>
< ion-select #carMake(change)=elementChanged(carMake)formControlName =carMake>
< ion-option value =fordselected>福特< / 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-input #carModel formControlName =carModeltype =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>请输入有效的车型。< / p>
< / ion-item>
< ion-item formGroupName =carDetails>
<离子标签浮动>车年< /离子标签>
< / ion-item>
以下是.ts文件的摘录
this.slideTwoForm = formBuilder.group([Validators.maxLength(11),Validators.pattern('[0 -9] *'),Validators.required])],
drivingCredentials:this.formBuilder.group({
drivingLicense:[''],
expirationDate:[''],$ (
carMake:[''],
carModel:[''],
carYear:['' ],
carColor:[''],
}),
password:['',Validators.compose([Validators.minLength(6),Validators.required])]
});
现在,carModel和carYear工作正常,并使用formControlName ,但carMake在使用formControlName时出错,错误:
polyfills.js:3 Uncaught ViewWrappedError {_nativeError:错误:./SignUpPage类中的错误SignUpPage - 内联模板:134:70由以下原因引起:无法找到控制...,originalError:错误:无法在_throwError中找到名称为'carMake'
的控件(http:/ / localhost:8100 / build / main ...,context:DebugContext}
我尝试使用ngControl而不是formControlName但值是空的。
< img src =https://i.stack.imgur.com/qzJrQ.pngalt =在这里输入图片描述>
没有人还有其他面临这样的问题,当离子选择在离子2 formbuilder吗?
我终于解决了我在离子选择和formControlName之间的问题,这要感谢
我看到对于离子选择,html造成问题的html有点不同:
< ion-item fromGroupName = carDetails >
<离子标签浮动>汽车制造< /离子标签>
< ion-select #carMake(change)=elementChanged(carMake)formControlName =carMake>
< ion-option value =fordselected>福特< / 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-select [class.invalid] =!slideTwoForm.controls.carDetails.controls.carMake.valid
&&(slideTwoForm.controls.carDetails.controls.carMake.dirty || submitAttempt)formControlName =carMake>
< ion-option value =fordselected>福特< / 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 / 更新他的文章
I'm using formbuilder in ionic 2 but facing problems with the ion-select directive when using formControlName with it. All the data is being forwarded to firebase where these values are being set.
here's an extract from the 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
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:
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.
did anyone else faced problems like this when sing ion-select in 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/
I saw that the html is a bit different for ion-select, the old html which was causing problems:
<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:
<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
这篇关于离子2离子选择不发送给环境的价值的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!