訪問子組件的形式以進行驗證

Question

我有一個Angular 2應用程序，其中有一個包含樹子組件的主組件。

在我的一個子組件中（我們稱其為user_input），我有一個帶有用戶輸入的表格。 在我的主組件中，我有一個按鈕，該按鈕需要檢查子組件的形式是否有效，從而啟用它。

我試圖通過訪問它。 （來自master.view.html）

<user_input #usrInput></user_input><button                           

[disabled]="!usrInput.formname.form.valid(click)="next()">
Next</button>

但是由於我在驗證我的主人時未初始化user_input表單，因此引發了“類型未知”異常。

有解決這個問題的聰明方法嗎？ 我有兩個共享的服務，但我不想為此使用它。

提前致謝！

[更新]

我在ngSwitch中有我的子元素。

  <div *ngSwitchCase="0">
    <create-user-info></create-user-info>
  </div>

  <div *ngSwitchCase="1">
    <create-user-services></create-user-services>
  </div>

  <div class="col-lg-12" *ngSwitchCase="2">
    <create-user-conditions></create-user-conditions>
  </div>

</div>

一旦我將其移出，錯誤就解決了。 當我需要將其放在ngSwitch中時，我使用了下面提供的解決方案

Answer 1

您可以利用所謂的安全導航運算符 。 這樣，如果usrInput不再為null，則usrInput以下成員進行求值。

<user_input #usrInput></user_input>
<button [disabled]="!usrInput?.formname.form.valid"
        (click)="next()">Next</button>