Question

我有一个按钮如下。

<button type="button" class="button-next btn btn-primary" nextStep>Next
  <i class="icon-arrow-right14 position-right"></i>
</button>

它位于带有formGroupName="company"的嵌套表单组下。如果公司无效，我想禁用按钮的click事件。另外，我想为formGroupName="company"中的所有字段设置脏，以便触发验证器并显示错误消息。

我可以在按钮的(click)事件中执行此操作，但我尝试找到最佳方法，例如将this formGroupName作为输入并执行操作操作而不是我显式传递formGroupName。我在页面中有多个formGroupName。

我不想使用按钮的disabled属性，因为我想在点击按钮时触发验证。

上面需要的最佳方法是什么？

Answer 1

在组件中设置boolean类型的标志。

export class ComponentName{
    showHideFlag:boolean;

}

如果公司无效，则将标志设置为false，否则将其设置为true。在按钮的HTML中，使用ngIf按要求显示或隐藏此按钮

 <button type="button" *ngIf="showHideFlag" class="button-next btn btn-primary" nextStep>Next
  <i class="icon-arrow-right14 position-right"></i>
 </button>

是否可以在Angular 2中的模板HTML中引用此表单？

1 个答案: