Question

Cannot read property 'touched' of undefined
    at LoginComponent.push../src/app/login/login.component.ts.LoginComponent.onClick

app-login组件ts文件，当单击发生在组件外部时，我将表单标记为未更改。

@ViewChild('container') container: ElementRef;

       @HostListener('document:click', ['$event.target'])
            onClick(targetElement) {
                const clickedInside = this.container.nativeElement.contains(targetElement);
                if (!clickedInside && this.loginForm.touched) {
                   this.loginForm.markAsUntouched();
                }
            }
    }

应用登录html

 <form method="get" [formGroup]="loginForm" (ngSubmit)="onSubmit()" #container>
<div id="tab-1" class="log-tab-content current">
  <div class="login-form">

父组件（当我在父组件页面上时，错误消息显示在控制台上）。它具有应用程序登录选择器和本地引用#priceTabClick 我在其他组件中也有应用程序登录，但只有在组件中，它会由于单击而显示错误。

    <ul class="log-tabs">
      <li id="logintab" class="tab-link current" data-tab="tab-1">Sign In</li>
      <li class="tab-link" data-tab="tab-2">Register</li>
    </ul>
    <app-login [planId]="planId" [serviceType]="serviceType"></app-login>
  </div>

  <!-- Nav tabs -->
  <ul class="nav nav-tabs">
    <li class="active wow fadeInRight"><a href="#Section1" data-toggle="tab">COMPARE PLANS</a></li>
    <li class="wow fadeInLeft"><a #priceTabClick href="#Section3" data-toggle="tab">PRICE CALCULATOR</a></li>
  </ul>

我如何触发点击（#priceTabClick）。点击发生在ngOnInit（）

    @ViewChild('priceTabClick') priceTabClick: ElementRef;

    this.priceTabClick.nativeElement.click(); //The error goes away if I remove this line but I need the click. Manually clicking that li a link doesn't show any error.

更新。如果我触发了ngAfterViewInit而不是onInit的单击，则错误消失了，但随后我获得了planId属性的新错误，该错误还将发送到子组件应用程序登录。触发点击的函数还具有更改planId值的代码。 ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked previous value 0 current value planId=2;

无法读取父组件在子组件中触发的未定义属性“接触”

0 个答案: