如何禁用 Angular 中不同组件中的按钮？

【问题标题】：How can I disable a button thats in a different component in Angular?如何禁用 Angular 中不同组件中的按钮？
【发布时间】：2021-06-04 00:32:49
【问题描述】：

我有这个组件结构：我有一个对话框，它有一个“添加”按钮，一个来自子组件的渲染表单（上面的结构）

我正在尝试禁用按钮，直到子组件（表单）有效。表格有效时；按钮变为启用状态。

结构：

<ng-container >
  <add-action-form
    [patches]="this.config.data"
  >
  </add-action-form>

  <div class="p-dialog-footer">
    <button
      pButton
      class="p-button-secondary p-button-text"
      [label]="cancel"
      (click)="onCancel()"
    ></button>
    <button
      pButton
      [label]="add action"
      (click)="onAddAction()"
    ></button>
  </div>
</ng-container>

【问题讨论】：

标签： javascript angular typescript components

【解决方案1】：

如果您使用的是响应式表单，您可以订阅表单的值更改并发出一个事件返回说明表单是否有效。

这是一个例子。

add-action-form.component.ts

// some code

form: FormGroup();

@Output()
valueChanged = new EventEmitter<boolean>();

ngOnInit() {

  this.form.valueChanges.subscribe(_ => valueChanged.emit(this.form.valid));
}

// some more code

<ng-container >
  <add-action-form
    [patches]="this.config.data"
    (valueChanged)="addActionFormValid = $event"
  >
  </add-action-form>

  <div class="p-dialog-footer">
    <button
      pButton
      class="p-button-secondary p-button-text"
      [label]="cancel"
      (click)="onCancel()"
      [disabled]="!addActionFormValid"
    ></button>
    <button
      pButton
      [label]="add action"
      (click)="onAddAction()"
      [disabled]="addActionFormValid"
    ></button>
  </div>
</ng-container>

【讨论】：