Bind the child component form to parent component form

Question

I have two components parent and child. I have created the two form group for parent and child in there respective components

in reactive form model

and I have to bind the child form group to the parent form group. Is it possible to do.

Note: I am passing the parent form to child component

By binding, do you mean passing the data upstream to the parent? Or are you referring to the entire form state? — wentjun
– wentjun, Commented Apr 25, 2019 at 4:04
I have done this passing the parent form to the child.I have created the new form group for the child form in child.component.ts and created the observerable for the child form while the child form value changes i will update the validity for the parent form Is this approach is correct? — prem_kumar
– prem_kumar, Commented Apr 28, 2019 at 13:14

Brijesh · Accepted Answer · 2019-04-25 08:37:04Z

2

You do not have to create to form group for this. You have to pass parent form group to the child.

Create formgroup and formcontrol in parent component and pass fromcontrol and formgroup in child component using @input.

Whenever you will submit form you will get values from child component fields too.

Go through the below code Parent Component

<form [formGroup]="operatorForm" #formElement>
    <div class="inner">
      <!-- <h6>Donation Collected</h6> Text only For Churches Panel -->
      <app-date-filter
        [fromDate]="fromDate"
        [toDate]="toDate"
        [dateForm]="operatorForm"
      ></app-date-filter>
      <div>
        <mat-form-field>
          <mat-select
            formControlName="status"
            (selectionChange)="filterChange($event)"
            placeholder="Filter Type"
          >
            <mat-option [value]="FILTER_TYPE.active"> Active </mat-option>
            <mat-option [value]="FILTER_TYPE.blocked"> Blocked </mat-option>
            <mat-option [value]="FILTER_TYPE.deleted"> Deleted </mat-option>
          </mat-select>
        </mat-form-field>
      </div>


    </div>
    <div class="btn-wrap filterBtns">
      <button
        mat-raised-button
        (click)="reset()"
        [disabled]="!operatorForm.dirty"
      >
        Reset
      </button>
      <button
        (click)="filter()"
        mat-raised-button
        color="primary"
        class="ml10 mat-filter-button"
        [disabled]="!operatorForm.dirty"
      >
        Filter
      </button>
    </div>
  </form>

parent.component.ts

this.operatorForm = this._fb.group({
  fromDate: ['', []],
  toDate: ['', []],
  status: [null, []]
});
get fromDate():FormControl{ 
 return this.operatorForm.controls['fromDate'] as FormControl 
} 
get toDate():FormControl{
 return this.operatorForm.controls['toDate'] as FormControl
}

Child Component

    @Input() fromDate: FormControl;
  @Input() toDate: FormControl;

  @Input() dateForm: FormGroup;

    <div class="inner" [formGroup]="dateForm">
  <label for="">Added On</label>
  <div class="column">
    <mat-form-field>
      <input
        matInput
        readonly
        [matDatepicker]="frompicker"
        formControlName="fromDate"
        placeholder="From"
      />
      <mat-datepicker-toggle
        matSuffix
        [for]="frompicker"
      ></mat-datepicker-toggle>
      <mat-datepicker #frompicker></mat-datepicker>
    </mat-form-field>
  </div>
  <div class="column">
    <mat-form-field>
      <input
        matInput
        readonly
        [matDatepicker]="topicker"
        formControlName="toDate"
        placeholder="To"
      />
      <mat-datepicker-toggle matSuffix [for]="topicker"></mat-datepicker-toggle>
      <mat-datepicker #topicker></mat-datepicker>
    </mat-form-field>
  </div>
</div>

edited Apr 25, 2019 at 8:37

answered Apr 25, 2019 at 5:25

Brijesh

711 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Eliseo Over a year ago

About your code: 1.-fromDate and ToDate are strings, not formControl and you should use [fromDate]="'fromDate'" and [toDate]="'toDate'". Another aproach is pass really a FormControl like your forked code in stackblitz.com/edit/mat-checkbox-al9yzn?file=app%2Fchild.html

Brijesh Over a year ago

As I said that Create formgroup and formcontrol in parent component and pass formcontrol and formgroup in child component using @input. So fromDate and toDate will be formcontrol not string. get fromDate():FormControl{ return this.formGroup.controls['fromDate'] as FormControl } get toDate():FormControl{ return this.formGroup.controls['toDate'] as FormControl }

Eliseo Over a year ago

Sorry, I dont' see this detail. Anyway, the reason your code work if because you pass dateForm, you not use fromDate or toDate in the child

Brijesh Over a year ago

fromDate and toDate are formcontrol passed by using @input and they are used in child component to get the values of both fields and they are bind to formGroup. By this way we can access child formcontrol in parent component.

Eliseo Over a year ago

@Brijseh, see stackblitz.com/edit/mat-checkbox-zmeqc3?file=app/child.ts. It's your code removing @Input() fromDateand @Input() toDate. The "reason" is that you pass the formGroup. The formGroup is like another object. You pass the "memory adress", so you can change the value of the properties of the object in child

|

Collectives™ on Stack Overflow

Bind the child component form to parent component form

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related