如何在不使用服务的情况下在子组件到父组件之间传递反应式表单数据 [英] How to pass reactive form data between child to parent components with out using services

查看:20
本文介绍了如何在不使用服务的情况下在子组件到父组件之间传递反应式表单数据的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

当我们点击父按钮时,我们希望从父级使用子响应式表单数据.目前我们正在使用 viewchild 来获取子组件引用.我们正在获取所有静态数据,但不是表单填充数据......................................…………………………………………………………………………………………………………………………………………………………....

We would like to consume child reactive form data from parent when we click on parent button. Currently we are using viewchild for getting the child cpomponent reference. We are getting all static data but not the form filled data.......................................................................................................

parent.component.ts
@ViewChild(DetailsComponent) childrenComponent: childrenComponent;

save(){
let model=this.childrenComponent.buildDetailsModel();
/*here api to save model*/
}
children.component.ts
buildDetailsModel(): Details {
var a = {
  reportedToId: this.detailsForm.get('reportedTo').value,
  reportedOn: this.detailsForm.get('reportedTime').value,
  identifiedById: this.detailsForm.get('identifiedBy').value,
  identifiedOn: this.detailsForm.get('dateAndTimeIdentified').value,
  locationTypeId: this.detailsForm.get('locationType').value,
  addressId: this.detailsForm.get('locationAddress').value,
  AddressLine: this.detailsForm.get('locationOfAddress').value,
  description: this.detailsForm.get('description').value,
  PeopleExposed: this.dataSource
  };
  return a;
}

parent.html 
<child></child>

child.html
<form [formGroup]="detailsForm">
  <div fxLayout="column wrap" fxLayoutGap="12px">

    <div fxLayout="column" fxLayout.lt-sm="column" fxLayout.lt-md="column" 
   fxLayoutGap="24px">

      <div fxFlex="row" fxLayoutGap="24px" fxLayout.lt-md="column">
        <div fxFlex="column">
          <mat-form-field>
            <mat-label>Reported To</mat-label>
            <mat-select matInput formControlName="reportedTo">
              <mat-option value="Test 1">Test 1</mat-option>
              <mat-option value="Test 2">Test 1</mat-option>
            </mat-select>
          </mat-form-field>


          <mat-form-field>
            <input matInput [matDatepicker]="reportedTime" placeholder="Date 
          and time reported" date="true" time="true" 
          formControlName="reportedTime">
            <mat-datepicker-toggle matSuffix [for]="reportedTime"></mat- 
           datepicker-toggle>
            <mat-datepicker #reportedTime></mat-datepicker>
          </mat-form-field>

          <mat-form-field>
            <mat-label>Identified by</mat-label>
            <mat-select matInput formControlName="identifiedBy">
              <mat-option value="Test 1">Test 1</mat-option>
              <mat-option value="Test 2">Test 1</mat-option>
            </mat-select>
          </mat-form-field>
        </div>

推荐答案

将你的子表单包裹在表单元素里面,这样你就可以从父表单提交子表单,然后在子组件中注入 FormGroupDirective 来获取父表单的引用

<form (ngSubmit)="save()" [formGroup]="detailsForm"> <app-child></app-child> <button type="button">Save</button> </form>

Then use controlContainer to provide the existing FormGroupDirective in child component

然后使用 controlContainer 在子组件中提供现有的 FormGroupDirective

childcomponent.ts

childcomponent.ts

child.component.html

child.component.html

Example:https://stackblitz.com/edit/angular-xusdev

这篇关于如何在不使用服务的情况下在子组件到父组件之间传递反应式表单数据的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
相关文章
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆