使用来自单独组件的按钮禁用表单

Posted 2023-05-07

【中文标题】使用来自单独组件的按钮禁用表单

【英文标题】：Disable a form using a button from a separate component

【发布时间】：2022-01-18 17:56:56

【问题描述】：

有人可以就如何实现以下目标提供一些指导。

我有 2 个组件。组件 1 有一个带有多个文本表单字段的剑道表单。 在组件 2 中，我有一个按钮，单击它应该禁用整个表单 组件 1。

component-1.html

<form [disabled]="isDisabled">
  <kendo-textbox
    formControlName="name">
  </kendo-textbox>

  <kendo-textbox
    formControlName="surname">
  </kendo-textbox>

  <kendo-textbox
    formControlName="city">
  </kendo-textbox>
</form>

component-2.html

<button kendoButton [primary]="true" [disabled]="isDisabled" (click)="handleClick()">Try Me</button>

component-2.ts

在我的类中，我声明并初始化了一个名为 isDisabled 的变量并将其设置为 false。 然后在 handleClick 函数中，我正在更新 isDisabled 变量并将值设置为 true。

public isDisabled: boolean = false;

handleClick()
  this.isDisabled = true;

有人可以就我做错了什么或我缺少什么提供一些见解吗？

【问题讨论】：

这些组件有什么关系？查看组件之间的通信选项：angular.io/guide/component-interaction

【参考方案1】：

你应该考虑组件的状态，所以。

在控制器中，是否应该创建一个具有组件状态的变量，例如：

public buttonState:boolean=false;

public formState:boolean=false;

您是否应该理解事件以单独更改此状态，例如：

一个。在视图中：

<button (click)="activeForm()"> Active form </button>

b.在控制器中：

activeForm()
    this.formState = true;

您是否验证表单是否显示或隐藏，例如：

 <div *ngIf="formState">
     <form></form>
   </div>

这种方式适用于任何认为您需要处理程序的人。