I have a Modal Form with the following code in the template markup
<form [formGroup]="modalFG">
...
<ion-item *ngIf="isChangeStatus()">
<ion-select formControlName="jobStatus"
(ionChange)="jobStatusChangeHandler($event)">
<ion-option value=4>Success</ion-option>
<ion-option value=5>Failure</ion-option>
<ion-option value=6>Terminated</ion-option>
<ion-option value=8>Inactive</ion-option>
</ion-select>
</ion-item>
</form>
In the Typescript I've specified a value, but I can't get past this error.
Error: Must supply a value for form control with name: 'jobStatus'.
Can someone tell me what I'm doing wrong?
...
private modalFG:FormGroup;
private jobStatus:number;
constructor(
private navParams:NavParams,
private view:ViewController,
private fb: FormBuilder,
...
) {
this.changeStatus = false;
this.modalFG = fb.group({
comment: ['', Validators.required],
jobStatus: this.jobStatus
});
}
private ionViewWillLoad():void {
const data = this.navParams.get('data');
this.modalFG.setValue({'jobStatus': this.jobStatus});
}
private jobStatusChangeHandler(ev:any) {
console.log(ev);
}
private isChangeStatus():boolean {
return this.changeStatus;
}
I also have button handler for submit with this:
this.exitData.jobStatus = this.modalFG.get('jobStatus').value;
this.view.dismiss(this.exitData);
This is the full error message:
Error: Must supply a value for form control with name: 'jobStatus'.
at http://localhost:8100/build/vendor.js:22102:23
at http://localhost:8100/build/vendor.js:22026:66
at Array.forEach (<anonymous>)
at FormGroup._forEachChild (http://localhost:8100/build/vendor.js:22026:36)
at FormGroup._checkAllValuesPresent (http://localhost:8100/build/vendor.js:22100:14)
at FormGroup.setValue (http://localhost:8100/build/vendor.js:21907:14)
at ModalPage.webpackJsonp.124.ModalPage.ionViewWillLoad (http://localhost:8100/build/main.js:648:22)
at ModalImpl.ViewController._lifecycle (http://localhost:8100/build/vendor.js:17471:33)
at ModalImpl.ViewController._willLoad (http://localhost:8100/build/vendor.js:17331:14)
at OverlayPortal.NavControllerBase._willLoad (http://localhost:8100/build/vendor.js:44112:18)
Since it says ionViewWillLoad in the call stack, the error must be something in that section AFAIK!
My problem was that I wasn't providing all form controll values. For example:
<div formGroupName="form">
<input formControlName="first">
<input formControlName="second">
</div>
In this case, if you try to use method setValue
and do not provide all controll values, like this:
this.form.setValue({ second: "" });
it will throw an error.
Either use setValue
and provide value for all form controls:
this.form.setValue({ first: "", second: "" });
or, if you really intend to set partial values, use patchValue
method:
this.form.patchValue({ second: "" });