UntypedFormControl's valid property always returning false

I am working on a ionic cordova-angular project and I have a screen with an input field defined like this in html file.

<div class="inputdiv">
<ion-label class="requiredField">GR#</ion-label>
<ion-input class="ion-text-uppercase" formControlName="gr_number" ></ion-input>
</div>


and I am initializing the form and field like this in my typescript file.

export class UploadPodImagePage implements OnInit {
podForm: UntypedFormGroup;
gr_number: AbstractControl;
companyId: any;
grNo: any;
isPod: boolean = false;
podImagePath: any = "";
userCode: any;
sessionId: any;


constructor(public _utils: UtilsService,
public _storage: StorageService,
public _api: ApiService,
public _response: ResponseService,
public _loading: LoadingService,
public alertCtrl: AlertController,
public menuCtrl: MenuController,
private camera: Camera,
public _toast: ToastService,
public actionSheetController: ActionSheetController) {

this.podForm = new UntypedFormGroup({
gr_number: new UntypedFormControl('', Validators.required)
});

}


By the way This is not the full code. and I am using this field like this in my code.

validateGR() {
if (this.podForm.valid) {
const grNo = this.podForm.get('gr_number').value;
} else {
console.log("GR Number: ", this.podForm.get('gr_number').value);
this._toast.errorToast(getFormError(this.podForm.controls))
}
}


But the valid property is always returning false even though I have typed the value in the field. I have also tried marking the form as touched explicitely this.podForm.markAllAsTouched(); but it didn't worked also.

Continue reading...