无法读取未定义的“已触及”属性

Posted 2023-03-13

【中文标题】无法读取未定义的“已触及”属性

【英文标题】：Cannot read property 'touched' of undefined

【发布时间】：2017-07-04 03:16:44

【问题描述】：

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

为什么它不能读取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>

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

TypeError: _this.subscribe 不是函数 在评估 (http://localhost:3000/node_modules/rxjs/operator/toPromise.js:68:15) 在新的 ZoneAwarePromise (http://localhost:3000/node_modules/zone.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 （本机） 在 FormControl.eval [作为 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:717:45) 在 CompiledTemplate.proxyViewClass.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-browser.umd.js:3224:57) 在 ZoneDelegate.invokeTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:275:35)

下面是我的表单是如何构造的：

ngOnInit() 
    this.formName = this.fb.group(
       name: ["", [Validators.required]], 
       custdetails: this.fb.group(
            email: ["", Validators.required, ValidationHelper.emailValidator],
            confirm: ["", Validators.required]
        , 
            validator: ValidationHelper.emailMatcher
        )

    )

还有我的电子邮件验证器：

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 ;
        
    

【参考方案1】：

添加TS文件

get email() return this.formName.get('custdetails.email');

在 html 中添加验证

*ngIf="email.touched"

【参考方案2】：

该字段的完整路径是：

formName.get('custdetails.email')

所以你需要访问：

formName.get('custdetails.email').touched

另外，表单模型中存在错误。当多个验证器应用于同一个字段时，它们应该被包装在一个数组中：

// Replace that:
email: ["", Validators.required, ValidationHelper.emailValidator]
// With this:
// Notice the additional [ ] around the validators
email: ["", [Validators.required, ValidationHelper.emailValidator]]

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

【讨论】：

我收到一个错误.... TypeError: _this.subscribe is not a function...检查我更新的帖子

可能问题出在表单模型声明中。你能显示表单 model 的代码（即你在你的班级里有什么）吗？

您在声明验证器时出错。请参阅我的更新答案。