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

Question

我有这个组件结构：我有一个对话框，其中有一个“添加”按钮，一个从子组件（上面的结构）呈现的表单

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

结构：

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

Answer 1

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

这是一个例子。

添加操作-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>

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

How can I disable a button thats in a different component in Angular?

javascript

components

typescript

angular