Angular 4: отключено поведение для компонента кнопки

Question

Я бы хотел передать «отключенное» поведение пользовательской кнопке. Реальное поведение с кодом ниже состоит в том, что кнопка отключена, когда все поля формы не заполнены. Но когда я все заполняю, кнопка все равно отключена. У меня такое ощущение, что «отключенный ввод» в компоненте загружается при загрузке страницы, но никогда не обновляется, когда форма полностью заполнена, поэтому я не могу нажать на кнопку, чтобы отправить форму. Цель этого компонента - использовать его на нескольких страницах в разных формах. Есть ли способ сделать это?

Пользовательская кнопка Html:

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

Кнопка Custon 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

Измените свой элемент кнопки ниже:

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

В настоящее время вы напрямую используете атрибут html отключен, а не Angular. Следовательно, значение не будет обновляться после загрузки страницы.

Answer 2

Внесите изменения в код, подобный этому,

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