Блог

У меня есть такая структура компонента: у меня есть диалоговое окно, в котором есть кнопка «добавить» отображаемую форму из дочернего компонента (структура выше).

Я пытаюсь отключить кнопку до тех пор, пока дочерний компонент (форма) не станет действительным. Когда форма действительна, кнопка становится включенной.

структура:

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

Если вы используете реактивные формы, вы можете подписаться на изменения значений формы и отправить обратно событие, указывающее, является ли форма действительной или нет.

Вот пример.

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>