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

Question

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

我有 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;
}

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

Answer 1

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

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

public buttonState:boolean=false;

public formState:boolean=false;

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

一个。在视图中：

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

b.在控制器中：

activeForm(){
    this.formState = true;
}

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

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

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