typescript 无法读取未定义的属性“触摸”

Cannot read property 'touched' of undefined

提问by Shane

Why am i getting this error Cannot read property touched of undefined?

为什么我收到这个错误无法读取未定义的属性？

Why is it not able to read formName.controls['email'].touchedbut its able to read formName.get('custDetails').touched

为什么它不能阅读formName.controls['email'].touched但它可以阅读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

当我们使用formName.get('custdetails.email').touched......我得到以下错误

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)

类型错误：_this.subscribe不在的eval功能（HTTP：//本地主机：3000 / node_modules / rxjs /操作者/ toPromise.js：68：15）中的新ZoneAwarePromise（HTTP：//本地主机：3000 / node_modules /区。 js/dist/zone.js:551:29) 在 Object.toPromise ( http://localhost:3000/node_modules/rxjs/operator/toPromise.js:66:12) 在 _convertToPromise ( http://localhost:3000/ node_modules/@angular/forms//bundles/forms.umd.js:541:73) 在 Array.map (native) at FormControl.eval [as asyncValidator] ( http://localhost:3000/node_modules/@angular/forms //bundles/forms.umd.js:530:101) 在 FormControl.AbstractControl._runAsyncValidator (http://localhost:3000/node_modules/@angular/forms//bundles/forms.umd.js:2670:62) 在 FormControl.AbstractControl.updateValueAndValidity ( http://localhost:3000/node_modules/@angular/forms/ /bundles/forms.umd.js:2630:26) 在 FormControl.setValue ( http://localhost:3000/node_modules/@angular/forms//bundles/forms.umd.js:2988:18) 在 DefaultValueAccessor.eval [as onChange] ( http://localhost:3000/node_modules/@angular/forms//bundles/forms.umd.js:1658:21) 在 Wrapper_DefaultValueAccessor.handleEvent (/InternalFormsSharedModule/DefaultValueAccessor/wrapper.ngfactory.js:29:34) 在 CompiledTemplate.proxyViewClass.View_ReactiveFormComponentFive0.handleEvent_36 (/AppModule/ReactiveFormComponentFive/component.ngfactory.js:29:34) eval ( http://localhost:3000/node_modules/@angular/core//bundles/core.umd.js:12397:41) 在 HTMLInputElement.eval ( http://localhost:3000/node_modules/@angular/platform- browser//bundles/platform-b​​rowser.umd.js:3224:57) 在 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 };
        }
    }

回答by AngularChef

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 emailValidatoras an async validatorand it tries to subscribe to it. Hence the error message "_this.subscribe is not a function".

通过将两个验证器作为单独的参数传递，Angular 将第二个验证器解释emailValidator为异步验证器并尝试订阅它。因此错误消息“_this.subscribe 不是函数”。

回答by hemant rao

you need write ngClass in this input feild error will be solve.

您需要在此输入字段中编写 ngClass 错误将被解决。