CODEWITHSUNDEEP
angular
user9847788
user9847788

Reputation: 2435

How to access the value of a FormControl in a Child Component for the Parent Component?

My angular app has a parent component & several child components.

I have a 'Submit' button in my parent component which is disabled OnInit. It should only be enabled when a checkbox in one of the child components is checked. If the checkbox is not checked, then the button should remain disabled.

Here is my Parent Component HTML. I am trying to disable the button if the checkbox is unchecked:

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

The checkbox that I am trying to reference is located below (conditions.component.html).

app-conditions in my Parent is in reference to this child:

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

Can someone please tell me what changes I need to make so that I can enable / disable the button in the Parent based on whether or not the checkbox in the Child is checked or not? Thanks a lot

Upvotes: 1

Views: 2014

Answers (3)

Ashok
Ashok

Reputation: 753

Below is what you need in your child component to capture when the checkbox is checked and capture that in the parent component

For additional info: 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);
            }

Upvotes: 1

user9847788
user9847788

Reputation: 2435

I updated my Parent component with the following code:

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

The parent component button is now only enabled when the child component's checkbox is checked.

Upvotes: 1

Rajat Badjatya
Rajat Badjatya

Reputation: 818

Use Angular Output property

As per official angular documentation:

The child component exposes an EventEmitter property with which it emits events when something happens. The parent binds to that event property and reacts to those events.

Upvotes: 1

Related Questions