Привязать форму дочернего компонента к форме родительского компонента - PullRequest
Новая
       14

Привязать форму дочернего компонента к форме родительского компонента

3 голосов
/ 25 апреля 2019

У меня есть два компонента родительский и дочерний . Я создал две группы форм для родителя и потомка в соответствующих компонентах

в реактивной форме модель

и мне нужно связать дочернюю группу форм с родительской группой форм. Можно ли это сделать.

Примечание: Я передаю родительскую форму дочернему компоненту

1 Ответ

2 голосов
/ 25 апреля 2019

Вам не нужно создавать группу для этого.Вы должны передать родительскую группу форм дочернему элементу.

Создайте formgroup и formcontrol в родительском компоненте и передайте fromcontrol и formgroup в дочернем компоненте, используя @ input.

Каждый раз, когда вы отправите форму, вы получитезначения из полей дочерних компонентов.

Перейдите по следующему коду Родительский компонент 

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

дочерний компонент 

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