Question

我的角度应用程序有一个父组件和几个子组件。

我的父组件中有一个“提交”按钮，该按钮在OnInit中被禁用。仅当选中其中一个子组件中的复选框时，才应启用它。如果未选中该复选框，则该按钮应保持禁用状态。

这是我的父组件HTML。如果未选中此复选框，我将尝试禁用该按钮：

<form [formGroup]="emailForm" (ngSubmit)="onSubmit()" class="form-horizontal">
    <app-conditions (formReady)="formInitialized('conditions', $event)"></app-conditions>
    <app-damage-details-one (formReady)="formInitialized('damageDetailsOne', $event)"></app-damage-details-one>
    <app-damage-details-two (formReady)="formInitialized('damageDetailsTwo', $event)"></app-damage-details-two>
    <app-personal-info></app-personal-info>
    <app-send></app-send>

    <card>
        <card-footer>
            <button button class="axis-btn" type="submit" title="Confirm and send" data-kind="primary"
[disabled]="emailForm.conditions.acceptTerms.checked === false">Confirm and send</button>
        </card-footer>
    </card>
</form>

我要引用的复选框位于（conditions.component.html）下方。

我父母中的

应用条件是指这个孩子：

<div [formGroup]="conditionsForm">
    <card>
        <card-body>
            <div class="form-group">
                <label class="control-label" for="Accept">{{lblAccept} </label>
                <checkbox formControlName="acceptTerms" cid="Accept" heading="Accept" name="Accept" value="Accept">
                </checkbox>
            </div>
        </card-body>
    </card>
</div>

有人可以告诉我我需要进行哪些更改，以便可以根据是否选中了“子级”中的复选框来启用/禁用“父级”中的按钮吗？非常感谢

Answer 1

使用Angular Output属性

根据官方角度documentation：

子组件公开一个EventEmitter属性，当发生某些事件时，该属性将发出事件。父级绑定到该事件属性并对这些事件做出反应。

Answer 2

我用以下代码更新了Parent组件：

<button axis-button class="axis-btn" type="submit" title="Confirm and send" data-kind="primary"
    [disabled]="emailForm.controls['conditions'].controls['acceptTerms'].value === false">Confirm
    and send</button>

仅当选中子组件的复选框时，才启用父组件按钮。

Answer 3

下面是您需要在子组件中捕获复选框时捕获并在父组件中捕获的

有关其他信息：https://angular.io/guide/component-interaction

  1)@Output() change: EventEmitter<string> = new EventEmitter<string>();

    2)Also add a method that emits change when checkboxchange event occurs
        OnCheckBoxChecked(value: string) {
                this.change.emit(value);
            }

如何通过父组件访问子组件中FormControl的值？

3 个答案: