无法读取未定义的属性"触及"

Question

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

为什么它无法阅读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不是新版ZoneAwarePromise(http:// localhost:3000/node_modules/zone)的eval函数(http:// localhost:3000/node_modules/rxjs/operator/toPromise.js:68:15). js/dist/zone.js:551:29)在Object.toPromise(http:// localhost:3000/node_modules/rxjs/operator/toPromise.js:66:12)_convertToPromise(http:// localhost:3000 /在FormControl.eval的Array.map(native)中的node_modules/@angular/forms//bundles/forms.umd.js:541:73)[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)at at FormControl.SetValue中的FormControl.AbstractControl.updateValueAndValidity(http:// localhost:3000/node_modules/@angular/forms//bundles/forms.umd.js:2630:26)(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)在CompiledTemplate.proxyViewClass.View_ReactiveFormComponentFive0.handleEvent_36的Wrapper_DefaultValueAccessor.handleEvent(/InternalFormsSharedModule/DefaultValueAccessor/wrapper.ngfactory.js:29:34) (/AppModule/ReactiveFormComponentFive/component.ngfactory.js:717:45)在CompiledTemplate.proxyViewClass.eval(http:// localhost:3000/node_modules/@angular/core//bundles/core.umd.js:12397:41)在ZoneDelegate.invokeTask(http:// localhost:3000)的HTMLInputElement.eval(http:// localhost:3000/node_modules/@angular/platform-b​​rowser//bundles/platform-b​​rowser.umd.js:3224:57)/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 };
        }
    }

Answer 1

该领域的完整路径是:

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不是函数".