角度4：按钮组件的禁用行为

Question

我想将“禁用”行为传递给自定义按钮。下面代码的实际行为是，当表单中的所有字段都未填写时，该按钮被禁用。但是当我填满所有内容时，该按钮仍处于禁用状态。我感觉加载页面时会加载组件上的“禁用输入”，但是当表单完全填满时它永远不会刷新，因此我无法单击按钮来提交表单。该组件的目标是在具有不同形式的多个页面中使用。有办法吗？

自定义按钮HTML：

<button type="button" class="btn btn-primary" disabled="disabled" (click)="onClickButton()">{{ label }}</button>

Custon Button TS：

import { Component, Output, EventEmitter, Input } from '@angular/core';

@Component({
  selector: ' app-button-loader',
  templateUrl: './button-loader.component.html',
  styleUrls: ['./button-loader.component.css']
})
export class ButtonLoaderComponent {
  @Input() label: string;
  @Input() disabled: any;
  @Output() onClick = new EventEmitter<any>();

  constructor() { }

  onClickButton() {
    this.onClick.emit();
  }
}

这是我如何称呼组件：

<app-button-loader [disabled]="!demandCreationForm.valid" (onClick)="onSubmit()" [label]="'demand-create.button-submit' | translate"></app-button-loader>

Answer 1

对这样的代码进行更改，

<app-button-loader [disabled]="demandCreationForm.invalid" (onClick)="onSubmit()" [label]="'demand-create.button-submit' | translate"></app-button-loader>

Answer 2

将按钮元素更改为以下：

<button type="button" class="btn btn-primary" [disabled]="disabled" (click)="onClickButton()">{{ label }}</button>

[当前，您直接使用html属性'disabled'，而不是Angular属性。因此，一旦页面加载，该值将不会更新。