Menu
Why am i getting this error Cannot read property touched of undefined?
Why is it not able to read formName.controls['email'].touched but its able to read formName.get('custDetails').touched
<form [formGroup]="formName">
<fieldset formGroupName="custdetails">
<div class="form-group" [ngClass]="{'has-error': formName.controls['email'].touched
&& formName.controls['email'].hasError('invalidEmailAddress')}">
<label class="control-label">Email</label>
<input type="text" class="form-control"
formControlName="email" name="email" required />
</div>
</fieldset>
</form>
When we use formName.get('custdetails.email').touched ... i get the below erro
TypeError: _this.subscribe is not a function at eval (http://localhost:3000/node_modules/rxjs/operator/toPromise.js:68:15) at new ZoneAwarePromise (http://localhost:3000/node_modules/zone.js/dist/zone.js:551:29) at Object.toPromise (http://localhost:3000/node_modules/rxjs/operator/toPromise.js:66:12) at _convertToPromise (http://localhost:3000/node_modules/@angular/forms//bundles/forms.umd.js:541:73) at Array.map (native) at FormControl.eval [as asyncValidator] (http://localhost:3000/node_modules/@angular/forms//bundles/forms.umd.js:530:101) at FormControl.AbstractControl._runAsyncValidator (http://localhost:3000/node_modules/@angular/forms//bundles/forms.umd.js:2670:62) at FormControl.AbstractControl.updateValueAndValidity (http://localhost:3000/node_modules/@angular/forms//bundles/forms.umd.js:2630:26) at FormControl.setValue (http://localhost:3000/node_modules/@angular/forms//bundles/forms.umd.js:2988:18) at DefaultValueAccessor.eval [as onChange] (http://localhost:3000/node_modules/@angular/forms//bundles/forms.umd.js:1658:21) at Wrapper_DefaultValueAccessor.handleEvent (/InternalFormsSharedModule/DefaultValueAccessor/wrapper.ngfactory.js:29:34) at CompiledTemplate.proxyViewClass.View_ReactiveFormComponentFive0.handleEvent_36 (/AppModule/ReactiveFormComponentFive/component.ngfactory.js:717:45) at CompiledTemplate.proxyViewClass.eval (http://localhost:3000/node_modules/@angular/core//bundles/core.umd.js:12397:41) at HTMLInputElement.eval (http://localhost:3000/node_modules/@angular/platform-browser//bundles/platform-browser.umd.js:3224:57) at ZoneDelegate.invokeTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:275:35)
Below is how my form is construct:
ngOnInit() {
this.formName = this.fb.group({
name: ["", [Validators.required]],
custdetails: this.fb.group({
email: ["", Validators.required, ValidationHelper.emailValidator],
confirm: ["", Validators.required]
}, {
validator: ValidationHelper.emailMatcher
})
})
}
And my email validator:
static emailValidator = (control: AbstractControl) : {[key: string]: boolean} =>{
// RFC 2822 compliant regex
if (control.value.match(/[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/)) {
return null;
} else {
return { 'invalidEmailAddress': true };
}
}
254
The "Cannot read properties of undefined" error occurs when trying to access a property on an undefined value. You often get undefined values when: accessing a property that does not exist on an object. accessing an index that is not present in an array.
The "Cannot read property 'find' of undefined" error occurs when the find() is called on an undefined value. To solve the error, make sure to only call the method on arrays.
The "Cannot read property 'replace' of undefined" error occurs when calling the replace() method on an undefined value. To solve the error, provide a fallback for the value if it's equal to undefined and conditionally check that it stores the correct data type before calling the method.
The "Cannot read property 'split' of undefined" error occurs when trying to call the split() method on a variable that stores an undefined value. To solve the error, make sure to only call the split() method on strings.
It occurs when a property is read or a function is called on an undefined variable. TypeError: Cannot read properties of undefined (reading x) Undefined means that a variable has been declared but has not been assigned a value. In JavaScript, properties and functions can only belong to objects.
Undefined means that a variable has been declared but has not been assigned a value. In JavaScript, properties and functions can only belong to objects. Since undefined is not an object type, calling a function or a property on such a variable causes the TypeError: Cannot read property of undefined.
In JavaScript, properties and functions can only belong to objects. Since undefined is not an object type, calling a function or a property on such a variable causes the TypeError: Cannot read property of undefined.
add in TS file
get email(){ return this.formName.get('custdetails.email'); }
add validation in html
*ngIf="email.touched"
172
The complete path to the field is:
formName.get('custdetails.email')
So you need to access:
formName.get('custdetails.email').touched
Also, you have an error in the form model. When multiple validators are applied to the same field, they should be wrapped inside an array:
// Replace that:
email: ["", Validators.required, ValidationHelper.emailValidator]
// With this:
// Notice the additional [ ] around the validators
email: ["", [Validators.required, ValidationHelper.emailValidator]]
By passing the two validators as separate parameters, Angular interprets the second validator emailValidator as an async validator and it tries to subscribe to it. Hence the error message "_this.subscribe is not a function".
41
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
