访问子组件的形式以进行验证

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>