访问子组件的表单以进行验证

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 表单在我验证我的 master 时没有初始化，这会引发 "of type unknown" 异常。

有什么巧妙的方法可以解决这个问题吗？我有一项由两者共享的服务，但我不想为此使用它。

提前致谢！

[更新]

我在 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

您可以利用所谓的 safe navigation operator。这样，如果 usrInput 不再为 null，则仅对以下成员进行评估。

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

访问子组件的表单以进行验证

Accessing form of child component for validation

html

typescript

angularjs-ng-form

angular