无法读取未定义的属性“toucted”

Question

为什么我得到这个错误不能读取未定义的触摸属性？

为什么它不能读取formName。控制['email']。触摸，但它可以读取formName。获取（'custDetails'）。触摸

<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'）。

TypeError：_this.subscribe不是一个函数在值（http://localhost:3000/node_modules/rxjs/operator/toPromise.js： 68:15）在新区域Aware Promise（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/@角/窗体//bundles/forms.umd.js:541： 73）在FormC的rray.map（本机）ontrol.eval[作为asyncValidator]（http://localhost:3000/node_modules/@角/窗体//bundles/forms.umd.js:530： 101）在FormControl。_runAsyncValidator（http://localhost:3000/node_modules/@角/窗体//束/forms.umd.js:2670： 62）。摘要ontrol.update值和有效性（http://localhost:3000/node_modules/@角/形式//束/forms.umd.js:2630： 26）在FormControl.set值（http://localhost:3000/node_modules/@角/形式//束/forms.umd.js:2988： 18）在DefaultValueAccessor.eval[as onChange]（超文本传输协议：//localhost： 3000/node_modules/@角/窗体//bundles/form. umd. js： 1658:21）在CompiledTemplate. proxyViewClass的Wrapper_DefaultValueAccessor. handleEvents（/InternalFormsSharedModu/DefaultValueAccess/wrapper. ngfactory. js： 29:34）。View_ReactiveFormComponentFive0handleEvent_36（/AppModul/ReactiveFormComponentMay/组件. ngfactory. js： 717:45），在CompiledTemplate. proxyViewClass. ava（超文本传输协议：//localhost： 3000/node_modules/@角/核//bundles/core. umd. js： 12397:41），在HTMLInputElement. ava（超文本传输协议：//localhost： 3000/node_modules/@角/平台-浏览器//bundles/平台-浏览器. umd. js： 3224:57），在ZoneDeverate. InvkeWork（超文本传输协议：//localhost： 3000/node_modules/区. js/dist/区. 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 };
        }
    }




Answer 1

加载项TS文件

get-email（）{返回this.formName.get（'custdetails.email'）；}

在html中添加验证

*ngIF="email.touched"

Answer 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解释为异步验证器，并尝试订阅它。因此出现错误消息“\u this.subscribe不是函数”。